z-index

2023年01月11日

柏拉文

越努力，越幸运

一、认识

---

z-index属性设定了一个定位元素及其后代元素或flex项目的z-order。当元素之间重叠的时候，z-index较大的元素会覆盖较小的元素在上层进行显示。

对于一个已经定位的盒子（即其 position 属性值不是 static，这里要注意的是 CSS 把元素看作盒子），z-index 属性指定:

1. 盒子在当前堆叠上下文中的堆叠层级

2. 盒子是否创建一个本地堆叠上下文

二、取值

---

2.1 z-index: 数值

z-index: 数值: <integer>（整型数字）是生成的盒子在当前堆叠上下文中的堆叠层级。此盒子也会创建一个堆叠层级为 0 的本地堆叠上下文。这意味着**后代（元素）的 z-index 不与此元素的外部元素的 z-index**进行对比。

2.2 z-index: auto

z-index: auto: 盒子不会创建一个新的本地堆叠上下文。在当前堆叠上下文中生成的盒子的堆叠层级和父级盒子相同。

2.3 z-index: unset

z-index: unset:

2.4 z-index: initial

z-index: initial:

2.5 z-index: inherit

z-index: inherit:

三、问题

---

问题一、元素及其后代元素的堆叠层级

知识点: z-index: 数值 时, 会在当前堆叠的上下文中堆叠层级, 此盒子也会创建一个堆叠层级为 0 的本地堆叠上下文。这意味着后代元素的z-index不与此元素的外部元素 z-index 进行对比

理解知识点一、A 元素具有 z-index 属性，A 中的后代元素的 z-index 不会与 A 外部的元素的 z-index 进行比较、覆盖

Html

 <div class="container">
    <div class="box-a">
        <div class="item-a">item-a</div>
    </div>
    <div class="box-b">
        box-b
    </div>
</div>

Css

.box-a{
    position: relative;
    z-index: 90;     // A 盒子创建了自己的堆叠上下文
    width: 100px;
    height:100px;
    background-color: red;
    line-height: 100px;
    text-align: center;
}
.box-b{
    position: relative;
    z-index: 100;    // B 盒子创建了自己的堆叠上下文
    width: 100px;
    height: 100px;
    background-color: yellow;
    line-height: 100px;
    text-align: center;
}
.item-a{
    position: absolute;
    z-index: 99999;  // A 盒子后代元素基于 A 盒子的堆叠上下文创建自己的堆叠上下文，并且堆叠层级
    width: 200px;
    height: 200px;
    background-color: blue;
    line-height: 200px;
    text-align: center;
}

JavaScript

TavaScript

理解知识点二、A 元素没有 z-index 属性, A 中的后代元素的 z-index 将会与 A 外部的元素的z-index 进行比较、覆盖

Html

 <div class="container">
    <div class="box-a">
        <div class="item-a">item-a</div>
    </div>
    <div class="box-b">
        box-b
    </div>
</div>

Css

.box-a{
    position: relative;
    width: 100px;
    height:100px;
    background-color: red;
    line-height: 100px;
    text-align: center;
}
.box-b{
    position: relative;
    z-index: 100;    // B 盒子创建了自己的堆叠上下文
    width: 100px;
    height: 100px;
    background-color: yellow;
    line-height: 100px;
    text-align: center;
}
.item-a{
    position: absolute;
    z-index: 99999;  // A 盒子后代元素创建自己的堆叠上下文，并且堆叠层级
    width: 200px;
    height: 200px;
    background-color: blue;
    line-height: 200px;
    text-align: center;
}

JavaScript

TavaScript