CSS层叠上下文：深入剖析解决层级问题的关键

前端

2023-07-05 15:36:35

层叠上下文：掌控元素层级的关键

我们都经历过这样的时刻，在开发项目中，精心设计的组件需要更高的显示层级，但是无论我们如何调整 z-index 值，它似乎都无法发挥作用，仿佛 z-index 对它毫无作用。

这是怎么回事？答案在于CSS 层叠上下文 。层叠上下文是一个三维空间，元素在其中按照特定规则进行层叠。当元素处于不同的层叠上下文中，它们的层叠顺序就会受到影响。

触发层叠上下文

了解层叠上下文的关键是弄清楚哪些元素可以触发它。以下元素会触发层叠上下文：

根元素（html）
定位元素（position 属性不为 static）
包含块级格式化上下文的元素（如块级元素、表格、浮动元素等）
包含内联格式化上下文的元素（如行内块元素、内联表格等）
包含隔离格式化上下文的元素（如 iframe、object、embed 等）

层叠上下文中元素的层级顺序

一旦某个元素触发了层叠上下文，它就会创建一个新的层叠上下文。在这个层叠上下文中，元素的层叠顺序由以下因素决定：

z-index： z-index 值越大，层叠顺序越高。
定位类型： 定位类型为 fixed 或 absolute 的元素始终位于定位类型为 static 或 relative 的元素之上。
顺序： 在同一层叠上下文中，元素按照它们在 HTML 文档中出现的顺序进行层叠。

示例

为了更好地理解层叠上下文，让我们看几个示例：

示例 1：

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

.parent {
  position: relative;
}
.child1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 1;
}
.child2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 2;
}

由于 .parent 元素触发了层叠上下文，因此 .child1 和 .child2 元素都位于 .parent 元素的层叠上下文中。根据 z-index 值，.child2 元素位于 .child1 元素之上。

示例 2：

<div class="parent">
  <div class="child1"></div>
  <div class="child2">
    <div class="grandchild"></div>
  </div>
</div>

.parent {
  position: relative;
}
.child1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 1;
}
.child2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 2;
}
.grandchild {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: green;
  z-index: 3;
}