【CSS】之定位
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).
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
