CSS 层叠上下文：揭开 z-index 的神秘面纱

前端

2024-01-12 13:31:03

导言

在 CSS 布局的错综复杂的世界中，层叠上下文扮演着至关重要的角色。它提供了一个舞台，让我们能够控制元素如何在纵深轴上相互叠加。通过巧妙地利用层叠上下文，我们可以创建出富有表现力且引人入胜的布局，同时确保内容的可读性和可访问性。

什么是层叠上下文？

层叠上下文本质上是一个三维容器，它将元素分组在一起，以便在页面上进行定位和叠加。当一个元素建立一个层叠上下文时，它与其兄弟元素和父元素隔离，形成一个独立的渲染区域。

层叠上下文的创建

层叠上下文可以在以下情况下创建：

根元素 (HTML 元素)
具有以下属性的元素：
- position：absolute、fixed、sticky
- float：left、right
- display：flex、grid、inline-flex

层叠等级和层叠顺序

在层叠上下文中，元素根据两个因素进行定位和叠加：

层叠等级： 元素在层叠上下文中的深度。具有较高层叠等级的元素位于较低的元素之上。
层叠顺序： 元素在同一层叠等级中出现的顺序。如果元素具有相同的层叠等级，则较后出现的元素位于较早出现的元素之上。

z-index 属性

z-index 属性允许我们手动控制元素的层叠顺序。它是一个整数，较高的值表示较高的层叠顺序。z-index 仅在元素位于层叠上下文中时才有效。

示例：揭开 z-index 的秘密

让我们通过一个示例来了解 z-index 的工作原理：

<div style="position: relative; height: 100px; width: 100px;">
  <div style="position: absolute; top: 0; left: 0; width: 50px; height: 50px; background: red; z-index: 1;"></div>
  <div style="position: absolute; top: 0; left: 50px; width: 50px; height: 50px; background: blue; z-index: 2;"></div>
  <div style="position: absolute; top: 50px; left: 0; width: 50px; height: 50px; background: green; z-index: 3;"></div>
</div>