Tài liệu Relative positioning

Thảo luận trong 'Thiết Kế Web' bắt đầu bởi Thúy Viết Bài, 5/12/13.

  1. Thúy Viết Bài

    Thành viên vàng

    Bài viết:
    198,891
    Được thích:
    173
    Điểm thành tích:
    0
    Xu:
    0Xu
    To see why the positioning of elements can prove so useful, I need to change the perspective
    a bit. Instead of merely providing you with a tool to create big containers of information, relative
    positioning can actually become your best friend when you want to exert fine control over
    the positioning of inline elements.
    The vertical-align CSS attribute enables you to change the relative location of an element,
    such as the trademark symbol, in a line of text. Relative positioning offers far greater control
    over inline positioning, and that’s its greatest value, as the following example shows:
    <style type=”text/css”>
    .tm { position: relative; top: -2.2em; left: -2em;
    font: 8pt bold; border: 1px red groove; padding: 1px;
    background-color: #009; color: white; }
    </style>
    </head>
    <body>
    <p style=”font: 36pt bold Courier;”>
    This book has been brought to you by
    J. Wiley &amp; Sons, Inc.
    <a href=”trademark-info.html” target=”new” class=”tm”>tm</A>—
    formerly Hungry Minds, Inc., formerly IDG Books, Inc.
    </p>
    Here I create a new class, .tm, that creates a small blue box with white tm lettering inside
    that’s actually a hyperlink to the trademark information on the site. By using the top and
    left attributes, I can carefully tune exactly where the box appears on the layout, pixel by
    pixel.
     

    Các file đính kèm: