CSS 教學：相對定位與絕對定位的應用

Manifold

上面圖形的原始碼是：

    <div style="border: 1px solid;
                width: 200px; height: 120px;">
        <div style="color: blue;">Manifold</div>
    </div>

問題來了，我想把 Manifold 移到最右邊，要怎麼做？

調整 CSS 提供的 position 屬性，可以達到我們的要求。 先把黑色框框 (Box1) 的 position 屬性設成 relative， 這會使得 Box1 裡面元素的位置都是相對於 Box1。 再把 Manifold 的 position 屬性設成 absolute， 這使得我們可以藉由調整 Manifold 的 top, left, right, bottom 屬性來控制 Manifold 的位置。 至於要靠右的話，把 right 設成 0。 修改之後的原始碼如下：

    <div style="position: relative; border: 1px solid;
                width: 200px; height: 120px;">
        <div style="position: absolute; color: blue;
        right: 0;"> Manifold</div>
    </div>

圖形如下：

Manifold

如果想把 Manifold 移到右下角要怎麼做呢？聰明如你，應該知道答案了吧，沒錯，就是：

    <div style="position: relative; border: 1px solid;
                width: 200px; height: 120px;">
        <div style="position: absolute; color: blue;
        bottom: 0; right: 0;"> Manifold</div>
    </div>

圖形如下：

Manifold

通常會留一點空間，而不是把 Manifold 放在完全靠右下角的位置，圖形如下：

Manifold

原始碼是：

    <div style="position: relative; border: 1px solid;
                width: 200px; height: 120px;">
        <div style="position: absolute; color: blue;
        bottom: 3px; right: 6px;">Manifold</div>
    </div>

上面的教學是我從 BarelyFitz Designs 學到的，非常巧妙吧！其中還有提到 static 定位與 float，有興趣的人可以一讀。