1.z-index簡(jiǎn)介
(1) 概念
z-index屬性指定了元素與元素之間的z軸上的順序，而z軸決定元素之間發(fā)生覆蓋的層疊關(guān)系。
(2) 屬性值
1.默認(rèn)auto
為什么元素添加定位屬性(不包括static)后會(huì)覆蓋普通元素？
元素添加定位屬性(不包括static)后，z-index默認(rèn)是auto，在層疊水平上相當(dāng)于z-index為0，但是不會(huì)產(chǎn)生層疊上下文，但是會(huì)比普通元素沒(méi)有z-index的層級(jí)要高。
2.數(shù)值
z-index支持正負(fù)值
3.inherit
繼承父元素的z-index值
2.css中的層疊上下文
(1) 概念
層疊上下文是html中的一個(gè)概念，當(dāng)一個(gè)元素元素含有層疊上下文的時(shí)候，那么此元素就更靠近我們的眼睛（假如我們看一堵墻的時(shí)候，只能看到墻，后面的東西我們看不到，那這堵墻就相當(dāng)于含有層疊上下文，更靠近我們，后面的東西可以看做是普通元素）。
(2) 如何產(chǎn)生層疊上下文？
第一種方法，頁(yè)面根元素(html頁(yè)面根元素就是html)天生具有層疊上下文，我們稱(chēng)它為“根層疊上下文”。
字體在背景上就是以頁(yè)面根元素為層疊上下文為基礎(chǔ)進(jìn)行覆蓋的，字體是inline元素，而background是層疊順序最低的元素，遵循層疊順序。
第二種方法，定位元素的z-index為數(shù)值的層疊上下文。
div{position:absolute; z-index:1;}
第三種方法，其他css的屬性。
這些屬性可以看做z-index為auto
z-index值不為auto的flex項(xiàng)（父元素display:flex|inline-flex）。
?元素的opacity值不是1。
?元素的transform值不是none。
?元素的mix-blend-mode值不是normal。
?元素的filter值不是none。
?元素的isolation值不是isolate。
?position:fixed聲明。
元素的-webkit-overflow-scrolling為touch。
3.css中的層疊水平
在層疊上下文中往往包含很多元素，這么多元素由層疊水平來(lái)決定z軸上的先后順序，不至于相互打架，一起相爭(zhēng)。
4.css中的層疊順序
層疊順序是指不同元素相互層疊，規(guī)定先后順序的一套規(guī)則。而層疊上下文和層疊水平都是概念。
層疊水平有七個(gè)級(jí)別！我們引用大神張?chǎng)涡竦钠唠A圖。
小栗子：
id為box的div內(nèi)部包含span元素
根據(jù)圖三我們看出，span元素由于設(shè)置負(fù)的z-index位于div后，這里我們可以從上圖中塊狀元素覆蓋z-index為負(fù)值的元素，而層疊順序是需要在層疊上下文中，這里的層疊上下文就是根層疊上下文。
下面布局為div中有span和img元素，span在前，并且設(shè)置position:relative，圖片透明度為0.7。
圖四我們可以看出圖片在文字之上，由于span標(biāo)簽已經(jīng)設(shè)置了position:relative，此時(shí)span標(biāo)簽?zāi)J(rèn)z-index:auto，根據(jù)圖一我們可以看出，圖片層級(jí)低于z-index:auto，此時(shí)圖片應(yīng)該會(huì)在文字之下，這種情況就是透明度改變了圖片的層級(jí)。
圖五所示，圖片透明度為1，自然圖片變成普通流中的元素，被相對(duì)定位元素span覆蓋，這里的opacity我們可以換成上面如何產(chǎn)生層疊上下文第三種方法中的任意一個(gè)，請(qǐng)自行嘗試。
5.z-index的層疊
(1) 不發(fā)生嵌套
沒(méi)有層疊上下文，則根據(jù)DOM順序，后面的覆蓋前面的。
在有層疊上下文的時(shí)候，根據(jù)z-index的數(shù)值大小，誰(shuí)大誰(shuí)在上面。
(2) 發(fā)生嵌套
每個(gè)層疊上下文相當(dāng)于每一個(gè)獨(dú)立的個(gè)體，內(nèi)部的元素?zé)o論z-index為多大，對(duì)最頂部同級(jí)的層疊上下文元素毫無(wú)影響。
效果如下：
子級(jí)無(wú)論z-index為何值，都不會(huì)對(duì)父級(jí)元素層級(jí)造成影響。
為了方便理解，你可以把同一層級(jí)的層疊上下文元素看做是兩個(gè)不同的人，不同的人有不同的高度，你可以比較兩個(gè)人的高度，但是你不能說(shuō)手長(zhǎng)身高就更高一點(diǎn)吧。
層疊上下文內(nèi)部的其他元素的覆蓋關(guān)系就是以父級(jí)為根層疊上下文，重新按照上面的規(guī)則進(jìn)行覆蓋。
5.z-index使用
(1) z-index的技巧
1.定位元素z-index:auto可以看成z-index:0
例如：定位元素（不包括static）的層級(jí)要比普通元素層級(jí)要高。
2.z-index不為auto會(huì)產(chǎn)生層疊上下文
例如：兩個(gè)同級(jí)div都設(shè)置relative和z-index為數(shù)值，這兩個(gè)div就會(huì)產(chǎn)生層疊上下文，內(nèi)部元素永遠(yuǎn)不會(huì)影響到父級(jí)div的覆蓋關(guān)系。
3.z-index層疊順序終止與父級(jí)層疊上下文
(2) z-index值最好不要超過(guò)9
z-index在使用過(guò)程中，為避免一個(gè)項(xiàng)目多人協(xié)作產(chǎn)生互相覆蓋的問(wèn)題，所以在使用z-index的時(shí)候，不要讓z-index大于9，防止同事設(shè)置彈出框或其他層級(jí)要求很高的無(wú)法覆蓋。
(3) 獲取最高層級(jí)
我們?cè)谟玫揭恍┎寮裁吹臅r(shí)候，有時(shí)插件有一個(gè)很高的層級(jí)，我們自定義的元素需要覆蓋在其之上，這時(shí)我們可以通過(guò)js獲取body內(nèi)最高層級(jí)，讓我們自定義的元素z-index等于最高層級(jí)的z-index+1。
下面是js獲取最高層級(jí)代碼，感興趣的可以看一下。
(4) 利用z-index隱藏
在模擬button和input.submit的時(shí)候，我們可以設(shè)置樣式如下：
button{
position:absolute;
z-index:-1;
}
label{
background:#999;
padding:8px 16px;
line-height:30px;
color:#fff;
}
<button id="btn"></button>
<label for='btn'></label>
上面父級(jí)無(wú)定位z-index設(shè)置，自然不會(huì)創(chuàng)建層疊上下文，此時(shí)層疊上下文為根層疊上下文html，則button是以為層疊上下文根元素html來(lái)進(jìn)行覆蓋，由于label為inline元素，button層級(jí)為z-index負(fù)值，根據(jù)層疊順序我們可以明白button在body上面，而label位于button之上。
