摒弃浮于表面的了解，全面理解层叠等级和层叠上下文

前端

2024-01-06 20:27:57

如何正确理解层叠等级和层叠上下文？

以前，我以为 z-index 就是用来定义一个元素在屏幕 Z 轴上的堆叠顺序，z-index 值越大在 Z 轴上就越靠上，也就越离屏幕观察者越近。但这个认识存在很大的问题。

首先，z-index 不仅仅只是影响元素的堆叠顺序。它还会影响元素的层叠上下文，进而影响元素的显示效果。

层叠上下文是一个三维空间，其中包含了所有元素。元素在层叠上下文中的位置决定了它们的显示顺序。层叠等级决定了元素在层叠上下文中的位置。

当一个元素具有较高的层叠等级时，它就会位于其他元素的前面。当一个元素具有较低的层叠等级时，它就会位于其他元素的后面。

层叠等级可以通过 z-index 属性来设置。z-index 属性的值可以为任意整数。z-index 值越大，层叠等级越高。z-index 值越小，层叠等级越低。

除了 z-index 属性之外，还有一些其他因素也会影响元素的层叠等级。这些因素包括：

元素的类型
元素的位置
元素的父元素

了解了层叠等级和层叠上下文的概念之后，您就可以更好地控制元素的显示顺序。这对于创建具有良好视觉效果的网页非常重要。

实例

下面是一个简单的示例，演示了层叠等级和层叠上下文是如何影响元素的显示顺序的。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
  </div>
</body>
</html>

#parent {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
}

#child1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: blue;
}

#child2 {
  position: absolute;
  top: 0;
  left: 100px;
  width: 100px;
  height: 100px;
  background-color: green;
  z-index: 1;
}