css absolute和float，relative，z-index的同異

標籤：tom   塌陷   abs   相對   strong   hidden   屬性   垂直   維護   

大神占樓：

簡書張歆琳

http://www.jianshu.com/p/a3da5e27d22b

摘錄：

float是欺騙父元素，讓其父元素誤以為其高度塌陷了，但float元素本身仍處於文檔流中，文字會環繞著float元素，不會被遮蔽。

absolute（層級高）其實已經不能算是欺騙父元素了，而是出現了層級關係。

一旦給元素加上absolute或float就相當於給元素加上了display:block;，就可以給元素定寬width了。

未指定left/top/right/bottom的absolute元素，其在所處層級中的錨點就是正常文檔流中該元素的錨點。

多一個屬性意味著多一層維護。

CSS裡有個細節值得關註：用absolute的left: 0;right: 0;top: 0;bottom: 0;來實現全屏展開，對於absolute元素來說，如果同時設定left和right會水平展開，同時設定top和bottom會垂直展開。那為何不設width/height為100%呢？代碼都貼給你了，可以自己試試。算了告訴你答案吧，前面說了，不設top/right/top/bottom的話absolute會從正常文檔流應處的位置開始定位，因此做不到全屏。除非你設定width/height為100%後，同時再設left: 0; top: 0;。

推薦的是absolute控制隱藏和顯示。方法當然相當簡單，如absolute+ top:-9999em，或absolute + visibility:hidden。

 

在父元素 中設定相對定位屬性，子項目中設定絕對位置屬性。絕對位置脫離文檔流，需設定定位資訊。

 

css absolute和float，relative，z-index的同異