一、引子
见下图，我们有one、two、three三个div。
one嵌套了一个nested的div。
nested的z-index等于100，two的z-index只等于1。
但是nested却仍然被two覆盖。
Why?
别着急，我们慢慢剖析。
二、正常的元素顺序
我们新建三个div：
<div>one</div>
<div>two</div>
<div>three</div>
页面效果展示如下（代码见附录A）：
正常的文档流中，元素次序是跟元素在文档中出现次序一致。
three出现最后，次序最高，覆盖掉two。
以此类推，two出现比one稍晚，所以覆盖住one。
三、positioned元素脱颖而出
当我们为two加上position:relative后（代码见附录B）：
two脱颖而出，覆盖住了one和three。
这是因为，浏览器先绘制non-positioned元素，再绘制positioned元素。
non-positioned元素 指
position属性值为默认值static，那么不为static的就是 positioned元素 。
四、都是positioned元素呢？
把three也设置为position: relative的话（代码见附录C）：
变回老样子，positioned元素次序和在文档出现次序一致。
想要让two再次脱颖而出，那考虑z-index吧！
五、z-index的用处
当把two设置为z-index: 1后（代码见附录D）：
通过z-index让two排到了前面。
“Z”代表X-Y-Z笛卡尔坐标系中的深度。
z-index数值高的元素会排在z-index数字较低的元素之前。
使用z-index要注意两个陷阱：
1. z-index只应用于positioned元素
2. 隐式地创建一个 层叠上下文（stack context）。
🚀 注意， 层叠上下文和BFC（Block Formatting Context）有所区别：
层叠上下文解决元素次序问题（一个元素是否排在另一个元素之前），而BFC解决文档流和一个元素是否会被重叠。
六、 层叠上下文
当你在一个positioned元素上应用z-index，会隐式创建一个全新的 层叠上下文，这个元素同时成为了该 层叠上下文的根元素。
上节的two就是一个 层叠上下文的根元素。
z-index只控制当前层叠上下文的元素次序。
我们把one和two设为position: relative，并且z-index都为1。
并且在one中内嵌一个nested的div，nested设置（具体代码见附录E）：
position: absolute;
z-index: 100;
结果展示的就是我们开头所提到的：
虽然nested的z-index为100，可是还是被two所覆盖。
这是因为，nested和two分别属于两个不同的层叠上下文。
z-index只控制自己当前层叠上下文的元素次序。
七、 深入层叠上下文
除了z-index会创建层叠上下文，opacity的值低于1也会创建，还有transform和filter也会，全部请详见附录F。
层叠上下文中元素的次序按照以下规则：
1. 层叠上下文的根元素
⬇️
2. z-index为负数的positioned元素
⬇️
3. Non-positioned元素
⬇️
4. z-index为auto的positioned元素
⬇️
5. z-index为正数的positioned元素
非必要不创建层叠上下文⚠️
在上一节的例子中，我们就感受到了，多个层叠上下文，一方面会造成混乱，另一方面会使我们受挫，达不到想要的效果。
八、 消除z-index魔术字的技巧
魔术字（magic number）指使用直接的数字字面量，这个值背后所代表的意思是隐藏着的，就像魔术一样。
在之前的例子中，z-index为1，或者为100，都可以算魔术字。
消除魔术字，最好的方法是用变量规范起来。
比如，我们用变量去规范程序中各个z-index的值：
--z-loading-indicator: 100;
--z-nav-menu: 200;
--z-dropdown-menu: 300;
--z-modal-backdrop: 400;
--z-modal-body: 410;
最后
看到这里，恭喜你完成了z-index的学习 🎉🎉🎉
更多文章可以关注公众号『鹏哥儿的Echo』
生命不息，笔耕不辍
附录A
HTML代码
<body>
<div class="box one">one</div>
<div class="box two">two</div>
<div class="box three">three</div>
</body>
CSS代码
body {
margin: 40px;
}
.box {
display: inline-block;
width: 200px;
line-height: 200px;
text-align: center;
border: 2px solid black;
background-color: #ea5;
margin-left: -60px;
vertical-align: top;
}
.one {
margin-left: 0;
}
.two {
margin-top: 30px;
}
.three {
margin-top: 60px;
}
附录B
HTML代码
<body>
<div class="box one">one</div>
<!-- 增加一个class名 -->
<div class="box two positioned">two</div>
<div class="box three">three</div>
</body>
CSS代码
body {
margin: 40px;
}
.box {
display: inline-block;
width: 200px;
line-height: 200px;
text-align: center;
border: 2px solid black;
background-color: #ea5;
margin-left: -60px;
vertical-align: top;
}
.one {
margin-left: 0;
}
.two {
margin-top: 30px;
}
.three {
margin-top: 60px;
}
/* 增加设置position值 */
.positioned {
position: relative;
background-color: #5ae;
}
附录C
HTML代码
<body>
<div class="box one">one</div>
<div class="box two positioned">two</div>
<!-- three也设置为positioned -->
<div class="box three positioned">three</div>
</body>
CSS代码
body {
margin: 40px;
}
.box {
display: inline-block;
width: 200px;
line-height: 200px;
text-align: center;
border: 2px solid black;
background-color: #ea5;
margin-left: -60px;
vertical-align: top;
}
.one {
margin-left: 0;
}
.two {
margin-top: 30px;
}
.three {
margin-top: 60px;
}
/* CSS其实不变 */
.positioned {
position: relative;
background-color: #5ae;
}
附录D
HTML代码
<body>
<div class="box one">one</div>
<div class="box two positioned">two</div>
<div class="box three positioned">three</div>
</body>
CSS代码
body {
margin: 40px;
}
.box {
display: inline-block;
width: 200px;
line-height: 200px;
text-align: center;
border: 2px solid black;
background-color: #ea5;
margin-left: -60px;
vertical-align: top;
}
.one {
margin-left: 0;
}
.two {
margin-top: 30px;
}
.three {
margin-top: 60px;
}
.positioned {
position: relative;
background-color: #5ae;
}
/* 设置z-index */
.two{
z-index: 1;
}
附录E
HTML代码
<body>
<div class="box one positioned">
one
<div class="absolute">nested</div>
</div>
<div class="box two positioned">two</div>
<div class="box three">three</div>
</body>
CSS代码
body {
margin: 40px;
}
.box {
display: inline-block;
width: 200px;
line-height: 200px;
text-align: center;
border: 2px solid black;
background-color: #ea5;
margin-left: -60px;
vertical-align: top;
}
.one {
margin-left: 0;
}
.two {
margin-top: 30px;
}
.three {
margin-top: 60px;
}
.positioned {
position: relative;
background-color: #5ae;
z-index: 1;
}
.absolute {
position: absolute;
top: 1em;
right: 1em;
height: 2em;
background-color: #fff;
border: 2px dashed #888;
padding: 1em;
line-height: initial;
z-index: 100;
}
附录F
满足以下任意条件可创建层叠上下文[2]：
- 文档根元素（
<html>）； position属性值为absolute或relative，并且z-index不为auto的元素；position属性值为fixed或sticky的元素flex容器的子元素，且z-index值不为autogrid容器的子元素，且z-index值不为autoopacity属性值小于1的元素mix-blend-mode属性值不为normal的元素；- 以下任意属性值不为
none的元素transformfilterperspective- clip-path
mask/ mask-image /mask-border
isolation属性值为isolate的元素-webkit-overflow-scrolling属性值为touch的元素- 值设定了任一属性而该属性在
non-initial值时会创建层叠上下文的元素（参考这篇文章[3]） contain属性值为layout、paint或包含它们其中之一的合成值，比如（contain: strict、contain: content）的元素
Reference
[1] CSS In Depth: 7.4 Stacking contexts and z-index
[3] Everything You Need to Know About the CSS will-change Property: https://dev.opera.com/articles/css-will-change-property/