|
關(guān)于z-index的問題是很多程序員都不知道它是如何起作用的。說起來不難，但是大部分人并沒有花時(shí)間去看規(guī)范，這往往會(huì)照成嚴(yán)重的后果。 你不信？那就一起來看看下面的問題。 問題 在下面的HTML我們寫了3個(gè)<div>元素，然后每個(gè)<div>元素里面都有一個(gè)<span>元素，每個(gè)<span>元素都有個(gè)背景色，并且使用absolute定位，為了能更清楚地看到z-index的效果，我們寫了一些其他的樣式。第一個(gè)<span>元素的z-index值為1，其他兩個(gè)沒有設(shè)置。 代碼如下： <div> <span class="red">Red</span></div><div> <span class="green">Green</span></div><div> <span class="blue">Blue</span></div>.red, .green, .blue { position: absolute;}.red { background: red; z-index: 1;}.green { background: green;}.blue { background: blue;} 然后挑戰(zhàn)來了： 嘗試把紅色的<span>元素放到其他兩個(gè)元素后面，但是必須遵守下面的規(guī)則： 不能修改HTML的內(nèi)容 不能增加或修改任何元素的z-index屬性 不能增加或修改任何元素的position屬性 想挑戰(zhàn)一些的話，就點(diǎn)擊上面Codepen的Edit按鈕去嘗試一下吧。如果你不能做到，那就接著看下去。 解決方案 解決方案很簡(jiǎn)單，你只需要給紅色的<span>標(biāo)簽增加一個(gè)opacity小于1，像下面這樣： div:first-child { opacity: .99;} 如果你覺得不可思議了，不相信透明度會(huì)影響疊加順序，那么恭喜你，即將學(xué)習(xí)新的技能，一開始看到我也不信。 接下來讓我們來摸索一番。 堆疊順序 z-index看上去很簡(jiǎn)單，z-index值大的元素在z-index值小的元素前面，對(duì)吧？但其實(shí)這只是z-index的一部分用法。很多程序猿都覺得很簡(jiǎn)單，沒有花太多時(shí)間去認(rèn)真閱讀規(guī)則。 HTML中的每一元素都是在其他元素的前面或者后面。這是眾所周知的堆疊順序（Stacking Order），這條規(guī)則在w3c規(guī)范里面說的很清楚，但我前面提到過了，大部分程序猿并不真正理解。 如果沒有涉及z-index和position屬性的話，那規(guī)則很簡(jiǎn)單，堆疊順序就是元素在HTML中出現(xiàn)的順序。(當(dāng)然如果你對(duì)行內(nèi)元素使用負(fù)margin的話，可能情況會(huì)復(fù)雜一些。) 加上position屬性的話，就是所有定位了得元素在沒有被定位的元素前面。（一個(gè)元素被定位的意思這里指的是它有一個(gè)position屬性，但是不是static，而是relative,absolute等） 再加上z-index屬性，事情就變得有點(diǎn)詭異。首先z-index值越大，越靠前。但是z-index屬性只作用在被定位了的元素上。所以如果你在一個(gè)沒被定位的元素上使用z-index的話，是不會(huì)有效果的。還有就是z-index會(huì)創(chuàng)建一個(gè)堆疊的上下文（Stacking Contexts），我們可以理解為一個(gè)層。 堆疊上下文 同一個(gè)父元素下面的元素會(huì)受父元素的堆疊順序影響，所以堆疊上下文是我們理解z-index和堆疊順序的關(guān)鍵。（下面為了簡(jiǎn)化，我們稱堆疊上下文為層。） 每一個(gè)層都有唯一的根節(jié)點(diǎn)。當(dāng)一個(gè)元素創(chuàng)建一個(gè)層，那么它的所有子元素都會(huì)受到父元素的堆疊順序影響。意味著如果一個(gè)元素位于一個(gè)最低位置的層，那你z-index設(shè)置得再大，它也不會(huì)出現(xiàn)在其它層元素的上面。 現(xiàn)在我們來說說什么情況下會(huì)產(chǎn)生新的層： 當(dāng)一個(gè)元素位于HTML文檔的最外層（<html>元素） 當(dāng)一個(gè)元素被定位了并且擁有一個(gè)z-index值（不為auto） 當(dāng)一個(gè)元素被設(shè)置了opacity，transforms, filters, css-regions, paged media等屬性。 一二條規(guī)則，Web開發(fā)者都知道，雖然他們不一定知道怎么描述 最后一條，是很多非w3c規(guī)范里面的文章很少提到的。通常來講，如果一個(gè)CSS屬性需要做一些特效的話，它都會(huì)創(chuàng)建一個(gè)新的層。 影響堆疊順序的因素有很多，我推薦你去看w3c規(guī)范，這篇文章我們主要探討關(guān)于層的內(nèi)容。 同一層里面的堆疊順序 下面是同一層里面的堆疊順序（從后到前）： 層的根元素 被定位了得元素并且z-index值為負(fù)，相同z-index的情況下，按照HTML元素的書寫順序排列，下面相同。 沒有被定位的元素 被定位的元素，并且z-index值為auto 被定位了的元素并且z-index值為正。 注意：z-index值為負(fù)的元素比較特殊，他們會(huì)先被繪制，意味著他們可以出現(xiàn)在其他元素的后面，甚至出現(xiàn)在它的父元素后面。但是必要條件是該元素必須與父元素處于同一層，并且父元素不是這個(gè)層的根元素。一個(gè)很好的例子 理解了如何和什么時(shí)候會(huì)產(chǎn)生一個(gè)新的層，那么下次如果你遇到z-index值設(shè)了很大，但是不起作用的話就去看看它的祖先是否產(chǎn)生了一個(gè)新的層。 總結(jié) 說了這么多，我們來給之前的代碼加上堆疊順序。 <div><!-- 1 --> <span class="red"><!-- 6 --></span></div><div><!-- 2 --> <span class="green"><!-- 4 --><span></div><div><!-- 3 --> <span class="blue"><!-- 5 --></span></div> 當(dāng)我們?cè)O(shè)置了opacity之后變成下面這樣。 <div><!-- 1 --> <span class="red"><!-- 1.1 --></span></div><div><!-- 2 --> <span class="green"><!-- 4 --><span></div><div><!-- 3 --> <span class="blue"><!-- 5 --></span></div> 紅色的<span>從6變成1.1，我用'.'來標(biāo)記它是新生成的層里面的第一個(gè)元素。 最后我們來總結(jié)一下為什么紅色的<span>會(huì)去到下面：一開始有兩個(gè)層，一個(gè)由根節(jié)點(diǎn)產(chǎn)生，一個(gè)由設(shè)置了z-index:1并且position:absolute的紅色<span>產(chǎn)生。當(dāng)我們?cè)O(shè)置了opacity時(shí)，產(chǎn)生了第三個(gè)層，并且第三個(gè)層把紅色<span>產(chǎn)生的層包裹了，意味著剛開始的z-index的作用域只在第三個(gè)層里面。而所有的<div>都沒有定位或者z-index，所以他們的堆疊順序按照HTML出現(xiàn)順序排列，于是第三個(gè)層就去到下面。 推薦閱讀 Elaborate description of Stacking Contexts The stacking context The Z-Index CSS Property: A Comprehensive Look 本文根據(jù)@Philip Walton的《What No One Told You About Z-Index》所譯，整個(gè)譯文帶有我們自己的理解與思想，如果譯得不好或有不對(duì)之處還請(qǐng)同行朋友指點(diǎn)。如需轉(zhuǎn)載此譯文，需注明英文出處：http:///articles/what-no-one-told-you-about-z-index/。  HelKyle 我是周曉楷，華南師范大學(xué)在校本科生，有輕微強(qiáng)迫癥，拖延癥，正在努力學(xué)習(xí)前端知識(shí)！微博@Helkyle。 如需轉(zhuǎn)載，煩請(qǐng)注明出處：http://www./css/what-no-one-told-you-about-z-index.html |
|
|
