CSS中z-index全解析
一、z-index解釋
z-index屬性決定了一個(gè)HTML元素的層疊級(jí)別，元素層疊級(jí)別是相對(duì)于元素在Z軸上（與X軸Y軸相對(duì)照）的位置而言。一個(gè)更高的z-index值意味著這個(gè)元素在疊層順序中會(huì)更靠近頂部。這個(gè)層疊順序沿著垂直的線軸被呈現(xiàn)。
在一個(gè)HTML頁面中，自然的層疊順序（也就是元素在Z軸上的順序）是由很多因素決定的：
- 具有負(fù)值的stacking contexts(層疊環(huán)境)元素，按照出現(xiàn)的先后順序排列（越靠后層級(jí)越靠上）;
- 沒有被定位，沒有浮動(dòng)的塊級(jí)元素，按照出現(xiàn)的先后順序排列;
- 沒有被定位，有浮動(dòng)的元素，按照出現(xiàn)的先后順序排列;
- 內(nèi)聯(lián)元素，按照出現(xiàn)的先后順序排列排列;
- 被定位的元素，按照出現(xiàn)的先后順序排列;
- Z-index 屬性，當(dāng)被正確使用的時(shí)候，會(huì)改變自然的層疊順序。
二、順序規(guī)則
如果不對(duì)節(jié)點(diǎn)設(shè)定 position 屬性, 位于文檔流后面的節(jié)點(diǎn)會(huì)遮蓋前面的節(jié)點(diǎn).?
?
二、定位規(guī)則
2.1 如果將 position 設(shè)為 static, 位于文檔流后面的節(jié)點(diǎn)依然會(huì)遮蓋前面的節(jié)點(diǎn)浮動(dòng), 所以?position:static?不會(huì)影響節(jié)點(diǎn)的遮蓋關(guān)系.
<style> div{width: 200px; height: 200px;}.a{ background-color: red; position: static;}.b{ background-color: green; margin-top: -100px; margin-left: 100px;}</style>
2.2 如果將 position 設(shè)為 relative (相對(duì)定位), absolute (絕對(duì)定位) 或者 fixed (固定定位), 這樣的節(jié)點(diǎn)會(huì)覆蓋沒有設(shè)置 position 屬性或者屬性值為 static 的節(jié)點(diǎn), 說明前者比后者的默認(rèn)層級(jí)高.
<style>div{width: 200px; height: 200px;}.a{ background-color: red; position: relative;}.b{ background-color: green; margin-top: -100px; margin-left: 100px;}</style>?
2.3 在沒有 z-index 屬性干擾的情況下, 根據(jù)順序規(guī)則和定位規(guī)則, 我們可以做出更加復(fù)雜的結(jié)構(gòu). 這里我們對(duì) A 和 B 都不設(shè)定 position, 但對(duì) A 的子節(jié)點(diǎn) A-1 設(shè)定?position:relative. 根據(jù)順序規(guī)則, B 會(huì)覆蓋 A, 又根據(jù)定位規(guī)則 A-1 會(huì)覆蓋 B.
...<style>div{width: 200px; height: 200px;}.a{ background-color: red;}.a-1{width: 130px; height: 130px; background-color: blue; position: relative;}.b{ background-color: green; margin-top: -100px; margin-left: 100px;} </style> </head> <body><div class="a">這里是A的內(nèi)容<div class="a-1">A-1</div></div><div class="b">這里是B的內(nèi)容</div> </body>
...
三、參與規(guī)則
不用 position 屬性, 在節(jié)點(diǎn)加上 z-index 屬性. z-index 對(duì)節(jié)點(diǎn)是不起作用的.
W3C 對(duì) z-index 屬性的描述中提到 在 z-index 屬性僅在節(jié)點(diǎn)的 position 屬性為 relative, absolute 或者 fixed 時(shí)生效.
此處不做演示
四、默認(rèn)值規(guī)則
如果所有節(jié)點(diǎn)都定義了 position:relative. z-index 為 0 的節(jié)點(diǎn)與沒有定義 z-index 在同一層級(jí)內(nèi)沒有高低之分;
但 z-index 大于等于 1 的節(jié)點(diǎn)會(huì)遮蓋沒有定義 z-index 的節(jié)點(diǎn); z-index的值為負(fù)數(shù)的節(jié)點(diǎn)將被沒有定義 z-index 的節(jié)點(diǎn)覆蓋.
...<style>div{width: 200px; height: 200px; position: relative;}.a{ background-color: red;}.b{ background-color: green; margin-top: -100px; margin-left: 100px; z-index: 1}.c{ background-color: yellow; margin-top: -100px; margin-left: 200px;}.d{ height: 450px; width: 450px; background-color: blue; color: #fff; margin-top: -400px; margin-left:0px; z-index: -1;} </style> </head> <body><div class="a">這里是A的內(nèi)容</div><div class="b">這里是B的內(nèi)容</div><div class="c">這里是C的內(nèi)容這里是C的內(nèi)容</div><div class="d">這里是D的內(nèi)容這里是D的內(nèi)容這里是D的內(nèi)容</div> </body>
...
當(dāng) position設(shè)為 relative, absolute 或者 fixed, 而沒有設(shè)置 z-index 時(shí), IE8 以上和 W3C 瀏覽器 (下文我們統(tǒng)稱為 W3C 瀏覽器) 的 z-index 默認(rèn)值是 auto, 但 IE6 和 IE7 是 0.
五、從父規(guī)則
5.1 如果 A, B 節(jié)點(diǎn)都定義了 position:relative, A 節(jié)點(diǎn)的 z-index 比 B 節(jié)點(diǎn)大, 那么 A 的子節(jié)點(diǎn)必定覆蓋在 B 的子節(jié)點(diǎn)前面.?
...<style>div{width: 200px; height: 200px;}.a{ background-color: red; position: relative; z-index: 2;}.b{ background-color: green; margin-top: -100px; margin-left: 100px; position: relative; z-index: 1}.a-1,.b-1{ background-color: yellow; width: 160px; height: 120px;} </style> </head> <body><div class="a">這里是A的內(nèi)容<div class="a-1">這里是A的子內(nèi)容A-1</div></div><div class="b">這里是B的內(nèi)容這里是B的內(nèi)容<div class="b-1">這里是B的子內(nèi)容B-1</div></div> </body>
...
5.2 如果所有節(jié)點(diǎn)都定義了 position:relative, A 節(jié)點(diǎn)的 z-index 和 B 節(jié)點(diǎn)一樣大, 但因?yàn)轫樞蛞?guī)則, B 節(jié)點(diǎn)覆蓋在 A 節(jié)點(diǎn)前面. 就算 A 的子節(jié)點(diǎn) z-index 值比 B 的子節(jié)點(diǎn)大, B 的子節(jié)點(diǎn)還是會(huì)覆蓋在 A 的子節(jié)點(diǎn)前面.?
...<style>div{width: 200px; height: 200px;}.a{ background-color: red; position: relative; z-index: 1;}.b{ background-color: green; margin-top: -100px; margin-left: 100px; position: relative; z-index: 1}.a-1,.b-1{ width: 160px; height: 120px; position: relative;}.a-1{ background-color: yellow; z-index: 999;}.b-1{ background-color: blue;} </style> </head> <body><div class="a">這里是A的內(nèi)容<div class="a-1">這里是A的子內(nèi)容A-1</div></div><div class="b">這里是B的內(nèi)容這里是B的內(nèi)容<div class="b-1">這里是B的子內(nèi)容B-1</div></div> </body>
...
很多人將 z-index 設(shè)得很大, 9999 什么的都出來了, 如果不考慮父節(jié)點(diǎn)的影響, 設(shè)得再大也沒用, 那是無法逾越的層級(jí). ?
六、層級(jí)樹規(guī)則
可能你會(huì)覺得，在 DOM 結(jié)構(gòu)中的兄弟節(jié)點(diǎn)會(huì)拎出來進(jìn)行比較并確定層級(jí), 其實(shí)不然.
... <style>div{width: 200px; height: 200px;}.a{ background-color: red; position: relative; z-index: 2;}.b{ background-color: green; margin-top: -100px; margin-left: 100px;}.a-1,.b-1{ width: 160px; height: 120px;}.a-1{ background-color: yellow; position: relative; z-index: 0;}.b-1{ background-color: blue; position: relative; z-index: 1; } </style> </head> <body><div class="a">這里是A的內(nèi)容<div class="a-1">這里是A的子內(nèi)容A-1</div></div><div class="b">這里是B的內(nèi)容這里是B的內(nèi)容<div class="b-1">這里是B的子內(nèi)容B-1</div></div> </body> ...我們認(rèn)為同時(shí)將 position 設(shè)為 relative, absolute 或者 fixed, 并且 z-index 經(jīng)過整數(shù)賦值的節(jié)點(diǎn), 會(huì)被放置到一個(gè)與 DOM 不一樣的層級(jí)樹里面, 并且在層級(jí)樹中通過對(duì)比 z-index 決定顯示的層級(jí). 上面的例子如果用層級(jí)樹來表示的話, 應(yīng)該如下圖所示.
圖中雖然 A-1 (z-index:0) 的值比 B-1 (z-index:1) 小, 但因?yàn)樵趯蛹?jí)樹里 A (z-index:2) 和 B-1 在一個(gè)層級(jí), 而 A 的值比 B-1 大, 根據(jù)從父規(guī)則, A-1 顯示在 B-1 前面.?
七、參與規(guī)則 2
前面提到的參與規(guī)則認(rèn)為只要節(jié)點(diǎn)的 position 屬性為 relative, absolute 或者 fixed, 即可參與層級(jí)比較, 其實(shí)不準(zhǔn)確. 如果所有節(jié)點(diǎn)都定義了 position:relative, 并且將 z-index 設(shè)為整數(shù)值, 根據(jù)從父規(guī)則, 父節(jié)點(diǎn)的層級(jí)決定了子節(jié)點(diǎn)所在層級(jí).
例子中 A, B-1, C 作為父節(jié)點(diǎn), z-index 的值相同, 根據(jù)順序規(guī)則, C 在 B-1 之前, B-1 在 A 之前; 又根據(jù)從父規(guī)則, 無論子節(jié)點(diǎn)的 z-index 值是什么, C-1-1-1 在 B-1-1 之前, B-1-1 在 A-1 之前.
如果我們將所有父節(jié)點(diǎn)的 z-index 屬性去除, 詭異的事情發(fā)生了. IE6 和 IE7 瀏覽器顯示效果不變, 而 W3C 瀏覽器的子節(jié)點(diǎn)不再從父, 而是根據(jù)自身的 z-index 確定層級(jí).
根據(jù)默認(rèn)值規(guī)則, IE6 / IE7 和 W3C 瀏覽器上的元素存在 z-index 默認(rèn)值的區(qū)別. 我們相信, 僅當(dāng) position 設(shè)為 relative, absolute 或者 fixed, 并且 z-index 賦整數(shù)值時(shí), 節(jié)點(diǎn)被放置到層級(jí)樹; 而 z-index 為默認(rèn)值時(shí), 只在 document 兄弟節(jié)點(diǎn)間比較層級(jí). 在 W3C 瀏覽器中, A, B-1 和 C-1-1 的 z-index 均為 auto, 不參與層級(jí)比較.
而在 IE6 和 IE7 中, 因?yàn)?z-index 的默認(rèn)值是 0, 所以也參與了層級(jí)比較.
設(shè)置了 position 而沒有 z-index 的節(jié)點(diǎn)雖然不參與層級(jí)樹的比較, 但還會(huì)在 DOM 中與兄弟節(jié)點(diǎn)進(jìn)行層級(jí)比較.
我們對(duì)上個(gè)例子改造一下, 將 B-1 的 position 屬性刪除后, W3C 瀏覽器顯示如下圖. 根據(jù)定位規(guī)則, A 和 C 會(huì)顯示在 B-1 的前面; 而根據(jù)順序規(guī)則, C 又顯示在 A 前面.?
在 IE6 和 IE7 中, 因?yàn)?A 和 C-1-1 設(shè)置了?position:relative, 而且 z-index 的默認(rèn)值為 0, 所以也參與層級(jí)樹比較, 所以有如下效果.
轉(zhuǎn)自：http://www.xiaoxiangzi.com/Programme/CSS/7884.html
轉(zhuǎn)載于:https://www.cnblogs.com/lvmylife/p/5391818.html
總結(jié)
以上是生活随笔為你收集整理的CSS中z-index全解析的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： RMAN backup validate
- 下一篇： 移动端webP调研