CSS 层叠上下文
CSS层叠上下文（Stacking Context）是CSS中一个重要的概念，它决定了元素在页面上的堆叠顺序。理解层叠上下文对于掌握CSS布局和解决元素重叠问题至关重要。
什么是层叠上下文？
层叠上下文是HTML元素的一种三维概念，它决定了元素在Z轴上的堆叠顺序。每个层叠上下文都是一个独立的堆叠环境，内部的元素按照特定的规则进行堆叠。
层叠上下文的创建
层叠上下文可以通过以下方式创建：
- 根元素（HTML）：文档的根元素自动创建一个层叠上下文。
- 定位元素：设置了
position属性为absolute、relative、fixed或sticky，并且z-index不为auto的元素。 - Flexbox 和 Grid 容器：设置了
z-index不为auto的 Flexbox 或 Grid 容器。 - 透明度：设置了
opacity小于 1 的元素。 - transform：设置了
transform不为none的元素。 - filter：设置了
filter不为none的元素。 - will-change：设置了
will-change属性为opacity、transform或filter的元素。
层叠顺序
在同一个层叠上下文中，元素的堆叠顺序遵循以下规则：
- 背景和边框：层叠上下文的背景和边框。
- 负 z-index：
z-index为负的子元素。 - 块级元素：普通流中的块级元素。
- 浮动元素：浮动元素。
- 内联元素：普通流中的内联元素。
- z-index: 0：
z-index为 0 或auto的定位元素。 - 正 z-index：
z-index为正的子元素。
代码示例
以下是一个简单的代码示例，展示了层叠上下文的工作原理：
html
<div style="position: relative; z-index: 1;">
<div style="position: absolute; z-index: 2; background-color: red; width: 100px; height: 100px;"></div>
<div style="position: absolute; z-index: 1; background-color: blue; width: 100px; height: 100px; top: 50px; left: 50px;"></div>
</div>
<div style="position: relative; z-index: 0;">
<div style="position: absolute; z-index: 3; background-color: green; width: 100px; height: 100px; top: 25px; left: 25px;"></div>
</div>
在这个例子中，红色的方块（z-index: 2）会覆盖蓝色的方块（z-index: 1），因为它们位于同一个层叠上下文中。绿色的方块（z-index: 3）虽然 z-index 值最高，但由于它位于另一个层叠上下文中，所以不会覆盖红色和蓝色的方块。
实际应用场景
模态框（Modal）
模态框通常需要覆盖页面上的其他内容。通过创建一个新的层叠上下文，可以确保模态框始终位于其他内容之上。
html
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; z-index: 1001;">
这是一个模态框
</div>
</div>
在这个例子中，模态框的背景和内容分别位于不同的层叠上下文中，确保模态框内容始终位于背景之上。
总结
CSS层叠上下文是控制元素堆叠顺序的重要机制。通过理解层叠上下文的创建规则和堆叠顺序，可以更好地控制页面布局，解决元素重叠问题。
附加资源
练习
- 创建一个包含多个层叠上下文的页面，观察元素的堆叠顺序。
- 尝试使用不同的CSS属性（如
opacity、transform）创建层叠上下文，并观察效果。 - 实现一个模态框，确保它始终位于页面其他内容之上。
提示
在调试层叠顺序时，可以使用浏览器的开发者工具查看元素的层叠上下文和 z-index 值。