开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> z-index为什么会不起作用 -> 正文阅读

[JavaScript知识库]z-index为什么会不起作用

一、引子

见下图，我们有one、two、three三个div。

one嵌套了一个nested的div。

nested的z-index等于100，two的z-index只等于1。

1-1 引子

但是nested却仍然被two覆盖。

Why?

别着急，我们慢慢剖析。

二、正常的元素顺序

我们新建三个div：

    <div>one</div>
    <div>two</div>
    <div>three</div>

页面效果展示如下（代码见附录A）：

2-1 正常的元素顺序

正常的文档流中，元素次序是跟元素在文档中出现次序一致。

three出现最后，次序最高，覆盖掉two。

以此类推，two出现比one稍晚，所以覆盖住one。

三、positioned元素脱颖而出

当我们为two加上position:relative后（代码见附录B）：

3-1 positioned元素

two脱颖而出，覆盖住了one和three。

这是因为，浏览器先绘制non-positioned元素，再绘制positioned元素。

non-positioned元素 指position属性值为默认值static，那么不为static的就是 positioned元素 。

四、都是positioned元素呢？

把three也设置为position: relative的话（代码见附录C）：

4-1 都是positioned元素

变回老样子，positioned元素次序和在文档出现次序一致。

想要让two再次脱颖而出，那考虑z-index吧！

五、`z-index`的用处

当把two设置为z-index: 1后（代码见附录D）：

5-1 把two的z-index设置为1

通过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;

结果展示的就是我们开头所提到的：

6-1 z-index失效

虽然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值不为auto
grid容器的子元素，且z-index值不为auto
opacity属性值小于1的元素
mix-blend-mode属性值不为normal的元素；
以下任意属性值不为none的元素
- transform
- filter
- perspective
- clip-path
- mask / mask-image / mask-border
isolation属性值为isolate的元素
-webkit-overflow-scrolling属性值为touch的元素
值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考这篇文章^[3]）
contain属性值为layout、paint或包含它们其中之一的合成值，比如（contain: strict、contain: content）的元素