前言：設(shè)置了z-index:9999;的層疊順序一定高于z-index:0;嗎？很明顯這句話(huà)在某些情況下是不成立的，而引起其不成立的原因就是堆疊上下文的現(xiàn)象黎休。本文主要介紹關(guān)于css中堆疊上下文的概念、引起的原因等床玻。
注：友情鏈接：關(guān)于堆疊上下文的MDN介紹翼虫，張?chǎng)涡竦牟┛?a target="_blank" rel="nofollow">《深入理解CSS中的層疊上下文和層疊順序》
1屑柔、什么是堆疊順序
從最底層到最高層的順序如下：
- 父級(jí)元素的background
- 父級(jí)元素的border
- 塊級(jí)子元素
- 浮動(dòng)元素
- 父元素的文字或內(nèi)聯(lián)子元素
- 定位元素z-index: 0
- 定位元素z-index: +
其中，負(fù)的z-index出現(xiàn)的位置有兩種可能：
- 父元素是
position:static;時(shí)：負(fù)的z-index出現(xiàn)在0號(hào)位（即1.父元素的background的底下一層） - 因一些原因?qū)е铝藢盈B上下文現(xiàn)象出現(xiàn)時(shí)珍剑，負(fù)的z-index出現(xiàn)在2號(hào)位與3號(hào)位的中間掸宛，即只要出現(xiàn)了層疊上下文，子元素的
z-index即使是負(fù)的招拙，也會(huì)出現(xiàn)在父元素的上邊唧瘾。
2、層疊上下文出現(xiàn)的原因
- 根元素 (HTML),
- z-index 值不為 "auto"的 絕對(duì)/相對(duì)定位别凤，
- 一個(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 屬性均唉，即便你沒(méi)有直接指定這些屬性的值（參考 這篇文章）
- -webkit-overflow-scrolling 屬性被設(shè)置 "touch"的元素
3是晨、我對(duì)層疊上下文現(xiàn)象的理解
假設(shè)有兩個(gè)部門(mén)，分別是【甲】和【乙】舔箭，【甲】在前罩缴，【乙】在后，正常情況下层扶，【甲】【乙】中的職員的地位由z-index決定箫章，z-index相同的時(shí)候，【乙】中職員級(jí)別比【甲】高镜会；而當(dāng)出現(xiàn)了層疊上下文現(xiàn)象時(shí)檬寂，就相當(dāng)甲、乙兩個(gè)部門(mén)的負(fù)責(zé)的項(xiàng)目發(fā)生了變化戳表，假如【甲】負(fù)責(zé)一個(gè)是千萬(wàn)級(jí)的項(xiàng)目桶至，【乙】負(fù)責(zé)的是日常十萬(wàn)級(jí)別的項(xiàng)目，所以最終【甲】中的職員匾旭，哪怕在部門(mén)中的地位再低（即z-index:0）镣屹，獲得的薪酬也會(huì)比【乙】部門(mén)中的職員包括部門(mén)leader（即z-index:9999）要高。
4价涝、一個(gè)例子
代碼鏈接
http://js.jirengu.com/boyocekayo/1/edit
html結(jié)構(gòu)
<div class='parent'>
<div class="a relative">a
<div class="a1">a1</div>
</div>
<div class="b relative">b
<div class="b1">b1</div>
</div>
</div>
css樣式
.parent{
height: 200px;
border: 10px solid rgba(255,0,0, 1);
padding: 15px;
margin: 12px;
background: #000;
}
.relative{
width: 100px;
height: 100px;
background: orange;
position: relative;
border: 1px solid red;
}
.a1,.b1{
background: green;
height:30px;
position: relative;
}
.a1{
z-index:999;
margin-top:0px;
}
.b1{
background: blue;
margin-top: -80px;
z-index: 0;
}
/*下列代碼導(dǎo)致層疊上下文現(xiàn)象*/
.a{
position: relative;
z-index: 1;
}
.b{
position: relative;
z-index: 1;
}
正常情況下女蜈，綠色的a1的z-index比藍(lán)色的b1高，所以a1能蓋住b1
出現(xiàn)了層疊上下文后，即使a1的z-index:9999;,b1z-index:0;伪窖，藍(lán)色的b1還是還是蓋住了綠色的a1逸寓。
