摘要：如果同級父元素不是層疊上下文元素就不需要看父元素的眼色了文章到這里就結(jié)束了，希望看完這篇文章的同學(xué)可以徹底理解。

今天寫代碼用antd-mobile的checkbox時(shí)候，想在內(nèi)容文本后面添加一個(gè)icon，并且需要對這個(gè)icon綁定事件，發(fā)現(xiàn)綁定之后怎么也點(diǎn)不中，調(diào)試發(fā)現(xiàn)原來被層層嵌套的dom元素蓋住了，肯定是z-index在作祟。可是按照我之前對z-index的了解（自信滿滿）卻怎么也不能把他由“被蓋住”改成“蓋住別人”，在一通“盲改”代碼之后，終于“蓋住”其他dom元素了。然而心里總是在想難道之前自己對z-index的認(rèn)知有問題么，抱著這樣的心態(tài)決定重新去學(xué)習(xí)，下面進(jìn)入正文

其實(shí)我想說大部分前端開發(fā)是不重視css的，也就導(dǎo)致了對css的很多屬性認(rèn)知都是表面的，這其中z-index就是最典型的一個(gè)，下面列舉的錯(cuò)誤認(rèn)知還請大家對號入座：

z-index值越大越“靠近我們” -- 最初級的認(rèn)知

要搭配position: absolute | relative | fixed 使用才有用呢 -- 稍微進(jìn)階一些的認(rèn)知

比較兩個(gè)兄弟節(jié)點(diǎn)誰更“靠近我們”，要看他們的同級父元素的比較呢。-- 可能是大部分前端的終極認(rèn)知了

例如下面的例子：要比較div1-1-1 和 div2-1 是要看div1 和 div2 的比較結(jié)果呢

如果以上三個(gè)大家都中槍了，沒關(guān)系，看完這篇文章你就永遠(yuǎn)告別了，在遇到z-index的問題再也不會“盲改，亂試”了

層疊上下文（stacking context）
看到上下文這個(gè)關(guān)鍵詞，我想大家應(yīng)該會有一點(diǎn)概念，沒錯(cuò)就是context。和你們認(rèn)識的那個(gè)BFC、IFC里面的上下文是一個(gè)意思，其實(shí)我想說css世界里面看到context或者XXX上下文其實(shí)都是同一個(gè)意思，完全可以理解為自成一派，在自己的小世界里面隨便折騰，不受其他的context影響。當(dāng)然，這個(gè)context是可以被其他context包含同時(shí)也可以包含其他context

層疊水平（stacking level）
層疊水平?jīng)Q定了在同一個(gè)層疊上下文中元素在Z軸上的顯示順序。
頁面中的所有元素（普通元素和層疊上下文元素）都有層疊水平。然而對普通元素的層疊水平探討只局限在層疊上下文元素中。
注：大家千萬不要把層疊水平和z-index混為一談，盡管某些情況下z-index確實(shí)可以影響層疊水平，但是也只局限于具有層疊上下文的元素，而層疊水平是所有元素都存在的

層疊順序（stacking order）
層疊順序表示發(fā)生層疊時(shí)有著特定的垂直顯示順序（規(guī)則）。
即：網(wǎng)上這張很流行的規(guī)則

關(guān)于這張圖有一些補(bǔ)充：
位于最下面的background/border特指層疊上下文元素的邊框和背景色。每一個(gè)層疊順序規(guī)則僅適用當(dāng)前層疊上下文元素的小世界
inline水平盒子指的是包括inline/inline-block/inline-table元素的層疊順序，他們都是同級別的
單純從層疊水平上看，實(shí)際上z-index：0和auto是可以看成一樣的，但是在層疊上下文領(lǐng)域有著根本性的差異

特性

層疊上下文的層疊水平要比普通元素高
層疊上下文可以阻斷元素的混合模式
層疊上下文可以嵌套，內(nèi)部層疊上下文及其所有子元素均受制于外部的層疊上下文
每個(gè)層疊上下文和兄弟元素獨(dú)立，也就是說，當(dāng)進(jìn)行層疊變化或者渲染的時(shí)候，只需要考慮后代元素
每個(gè)層疊上下文是自成體系的，當(dāng)元素發(fā)生層疊的時(shí)候，整個(gè)元素被認(rèn)為是在父層疊上下文的層疊順序中

如何創(chuàng)建

根元素 (HTML)
z-index 值不為 "auto"的 絕對/相對定位（在firefox/ie瀏覽器下position: fixed也是可以的）
一個(gè) z-index 值不為 "auto"的 flex 項(xiàng)目 (flex item)，即：父元素 display: flex|inline-flex
opacity 屬性值小于 1 的元素（參考 the specification for opacity）
transform 屬性值不為 "none"的元素
mix-blend-mode 屬性值不為 "normal"的元素
filter值不為“none”的元素
perspective值不為“none”的元素
isolation 屬性被設(shè)置為 "isolate"的元素
position: fixed
在 will-change 中指定了任意 CSS 屬性，即便你沒有直接指定這些屬性的值（參考這篇文章）
-webkit-overflow-scrolling 屬性被設(shè)置 "touch"的元素

層疊上下文與層疊順序

文章中多次提到普通元素具備層疊上下文后層疊水平就會變高，那么他究竟在層疊順序那個(gè)規(guī)則圖的哪個(gè)位置呢
把目光向上鎖定，第二條列舉了12個(gè)可以創(chuàng)建層疊上下文的方法，我們把他分為兩類：第二三條和其他。
依賴z-index取值的：位置取決于z-index的值
不依賴z-index取值的：在圖中第二高的位置，即：z-index = auto 或者 0

用一個(gè)例子來說明：

    
111
    
222

.container {
  width: 500px;
  height: 500px;
  background-color: #000;
  color: #fff;
  transform: scale(1); 
  /* 給container創(chuàng)建層疊上下文 */
}
.div1 {
  padding: 50px;
  background-color: aqua;
  z-index: 0;
  position: relative;
  /* 給div1創(chuàng)建層疊上下文，層疊水平依賴z-index的取值 */
}
.div2 {
  padding: 50px;
  background-color: red;
  opacity: 0.8;
  /* 給div2創(chuàng)建層疊上下文，層疊水平依賴z-index的取值 */
  /* margin-top: -40px; */
}

這個(gè)例子中一目了然，div1和div2的層疊水平一樣，都是在規(guī)則那張圖的第二高的位置，不過div2在div1的dom節(jié)點(diǎn)后面，所以div2要比div1的層疊水平高，我們把margin-top的注釋去掉看下：

要想使得div1在上面只需要把div1的z-index改成大于0的值就好了。

還是上面的htl結(jié)構(gòu)，接下來我們再來看一個(gè)有意思的例子：

.container {
  width: 500px;
  height: 500px;
  background-color: #000;
  color: #fff;
  transform: scale(1);
  /* 給container創(chuàng)建層疊上下文 */
}
.div1 {
  padding: 50px;
  background-color: aqua;
  opacity: 0.8;
  /* 給div1創(chuàng)建層疊上下文，層疊水平在z-index：0 */
}
.div2 {
  padding: 50px;
  background-color: red;
  position: relative;
  margin-top: -40px;
}

大家肯定會說，div1明顯蓋過div2啊，可是我們來看下實(shí)際情況：

實(shí)際情況下面的div2蓋過了div1，原因是當(dāng)html元素設(shè)置定位屬性的時(shí)候（absolute/relative），其z-index屬性自動生效變成
z-index： auto，所以這時(shí)候div1和div2的層疊水平是一致的，而div2在div1的dom節(jié)點(diǎn)后面，所以蓋過了div1（注意這里div2并沒有變成層疊上下文元素，這是有本質(zhì)區(qū)別的）

現(xiàn)在我們在一起看下文章開頭提到的幾個(gè)常見的錯(cuò)誤認(rèn)知：

z-index值越大越“靠近我們” -- 并不一定，首先要成為層疊上下文。或者如果比較的元素的父元素也是層疊上下文，那就完全取決于父元素了

要搭配position: absolute | relative | fixed 使用才有用呢 -- 對了一部分，還有其他的條件也可以使元素稱為層疊上下文元素

比較兩個(gè)兄弟節(jié)點(diǎn)誰更“靠近我們”，要看他們的同級父元素的比較呢。-- 如果同級父元素不是層疊上下文元素就不需要看“父元素的眼色”了

文章到這里就結(jié)束了，希望看完這篇文章的同學(xué)可以徹底理解z-index。