10步掌握CSS定位: position static relative absolute float

1. position:static

元素的 position 屬性默認值為:static，即該元素出現在文檔的常規位置，不會重新定位。

通常此屬性值可以不設置，除非是要覆蓋之前的定義。

#div-1 {
 position:static;
}

2. position:relative

設置了 position:relative，便可以結合top 、 bottom、 left 、 right 的屬性來偏移其文檔的常規位置。

例如將 div-1 向下移動 20 像素、向左移動 40 像素:

#div-1 {
 position:relative;
 top:20px;
 left:-40px;
}

注意 div-1 未被移動之前的地方，現在多了一點空隙，緊接著 div-1 的元素(div-after)卻沒有被移動，事實上即便 div-1 被移動了，它仍佔據原始位置。

貌似 position:relative 用處不大(我到覺得這點很有用)，但在後面的內容中顯得尤為重要。

3. position:absolute

設置了 position:absolute，即絕對定位，便可以將元素放在文檔中任何想放的位置。

例如將 div-1a 放置到右上角：

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

注意！由於 div-1a 被移走, 頁面中的其他元素位置也變了： div-1b, div-1c, div-after 都因此上移了。

div-1a 被放置在頁面的右上角。 能直接地定位元素很方便，但作用也不大。

這裡真正要做的是將 div-1a 相對於 div-1 定位，這就又要講到 relative 屬性了。

注

• IE瀏覽器Bug：設置了相對寬度(如 "width:50%")，該寬度將基於父元素而非自身。

4. position:relative + position:absolute

設置div-1的位置為 relative ， div-1中元素的定位都將相對於div-1。現將div-1a的position設為:absolute，可以實現將其置於div-1的右上角：

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

5. 兩列絕對定位

接下來使用relative 和absolute 實現兩列的絕對定位：

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

使用絕對定位(absolute positioning)的優點就是不需考慮元素在html中的位置，可以對元素任意放置，此處故意將div-1b放到div-1a之前；

注意，還有個元素被絕對定位的元素遮住了，怎麼辦？

6. two column absolute height

一種辦法是設置固定高度。

但不是萬全之策，因為元素的高度、字體的大小並不總是確定的。

#div-1 {
 position:relative;
 height:250px;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

7. float(浮動)

針對高度不定的情況，絕對定位不好用，於是想到另一方案。

可以盡量使用向左或向右浮動來實現文字環繞，特別是環繞圖片，此處用於更複雜的佈局工作(也只有用這種方法)。

#div-1a {
 float:left;
 width:200px;
}

8. 多列浮動

將兩列都像左浮動，可以實現兩列並列。

#div-1a {
 float:left;
 width:150px;
}
#div-1b {
 float:left;
 width:150px;
}

9. 多列浮動後清除浮動

將元素浮動後，再使用"clear" 清除浮動，後面內容拉向下。

#div-1a {
 float:left;
 width:190px;
}
#div-1b {
 float:left;
 width:190px;
}
#div-1c {
 clear:both;
}

10. Disclaimer & Resources

These examples are extremely simplified and do not trigger some of the CSS bugs in the Windows IE browser (of which there are many).

The following page was invaluable:
Relatively Absolute

While you're here check out the following:

• BarelyFitz Designs Open-Source Software Projects
• BarelyFitz Designs Screencasts