做過頁面布局的同學對z-index屬性應該是很熟悉了，z-index是針對網頁顯示中的乙個特殊屬性。因為顯示器是顯示的圖案是乙個二維平面，擁有x軸和y軸來表示位置屬性。為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z-index屬性來表示z軸的區別。表示乙個元素在疊加順序上的上下立體關係。
z-index值較大的元素將疊加在z-index值較小的元素之上。對於未指定此屬性的定位物件，z-index 值為正數的物件會在其之上，而 z-index 值為負數的物件在其之下。
兩個div，第二個向上移動50px，正常情況應該是這樣的
第二個div遮住了第乙個div，對第二個新增z-index屬性
結果就會變成這個樣子，z-index 最簡單的應用就是這樣
z-index屬性適用於定位元素（position屬性值為 relative 或 absolute 或 fixed的物件），用來確定定位元素在垂直於顯示屏方向（稱為z軸）上的層疊順序，也就是說如果元素是沒有定位的，對其設定的z-index會是無效的。
雖然第乙個div的z-index比第二個div大，但是由於第乙個div未定位，其z-index屬性未起作用，所以仍然會被第二個div覆蓋。
相同的z-index其實有兩種情況
1.如果兩個元素都沒有定位發生位置重合現象或者兩個都已定位元素且z-index相同發生位置重合現象，那麼按文件流順序，後面的覆蓋前面的。
2.如果兩個元素都沒有設定z-index，使用預設值，乙個定位乙個沒有定位，那麼定位元素覆蓋未定位元素
如果父元素z-index有效，那麼子元素無論是否設定z-index都和父元素一致，會在父元素上方
雖然子元素設定z-index比父元素小，但是子元素仍然出現在父元素上方
如果父元素z-index失效（未定位或者使用預設值），那麼定位子元素的z-index設定生效
子元素z-index=-5生效，被父元素覆蓋
如果兄弟元素的z-index生效，那麼其子元素覆蓋關係有父元素決定
雖然第乙個div的子元素的z-index比較高，但是由於其父元素z-index比第二個div低，所以第乙個div子元素會被第二個div及其子元素覆蓋
一天搞定CSS 層級 z index 18
因為定位的出現，所以有了元素重疊的情況，此時就出現了顯示誰的情況。在多層布局時，容易出現這種情況 定位position見 但層級規則可以通過z index來設定 1.在正常情況下，層級的大小由順序決定，後面的元素要比前面的元素的層級要高 charset utf 8 title div div2 sp...
DOM層級順序與z index
dom層級順序，大概來說就是dom節點在z軸方向 垂直於螢幕向外的方向 的顯示優先順序。為了調整dom層級順序，我們想到的往往就是用css的z index屬性來控制。雖然看著很簡單，但是有時在使用時，我們有時也許會碰到一些一些奇奇怪怪的問題 其實看似簡單的層級順序它自己的一套規則，理解這些規則可以幫...
z index層級在IE中無效
在css中，只能通過 改變層級，這個屬性就是z index，要讓z index起作用有個小小前提，就是元素的position屬性要是relative，absolute或是fixed。1.第一種情況 z index無論設定多高都不起作用情況 這種情況發生的條件有三個 1 父標籤 position屬性為...