层叠上下文（Stacking Context）：CSS世界的“楚河汉界”
想象一下，你正在组织一场盛大的派对。桌子上摆满了美食，有香气四溢的烤鸡，色彩鲜艳的水果拼盘，还有堆成小山的纸杯蛋糕。为了让每个人都能方便地取到食物，你需要合理地安排它们的摆放顺序。烤鸡块头最大，自然要放在最底层，水果拼盘色彩鲜艳，放在中间层吸引眼球，而最上面的纸杯蛋糕，则要摆放得精致诱人，让人忍不住伸手去拿。
在CSS的世界里，浏览器也需要安排网页元素的“摆放顺序”，这就是我们今天要聊的“层叠上下文（Stacking Context）”。它就像CSS世界里的“楚河汉界”，决定了哪些元素可以“越界”显示在其他元素之上，哪些元素只能乖乖地待在自己的“领地”里。
一、什么是层叠上下文？别被名字吓跑了！
“层叠上下文”这个名字听起来有点高深莫测，但实际上它只是一个抽象的概念。你可以把它想象成一个独立的“世界”，在这个世界里，元素的堆叠顺序会受到一些规则的限制。
举个例子，假设你创建了一个<div>元素，并给它设置了position: relative; z-index: 1;。那么，这个<div>元素就创建了一个新的层叠上下文。这意味着，这个<div>元素内部的所有子元素，它们的堆叠顺序都将在这个“新的世界”里进行计算，而不会受到外部元素的影响。
简单来说，层叠上下文就像一个容器，它包含了一组元素，并决定了这些元素的堆叠顺序。
二、谁有资格成为“楚河汉界”的霸主？
那么，哪些元素有资格创建层叠上下文呢？以下是一些常见的“霸主”：
- 根元素 (
<html>)： 整个网页的根元素，它自然是最大的“楚河汉界”的霸主。 position: absolute或position: relative且z-index值不为auto的元素： 这些元素拥有了“超能力”，可以脱离正常的文档流，通过z-index控制自己的层叠顺序。position: fixed或position: sticky的元素： 它们分别代表了“固定”和“粘性”定位，也具有创建层叠上下文的能力。z-index值不为auto的flex容器的子元素 (即 direct children)： Flex 容器的子元素如果设置了z-index，也会创建层叠上下文。opacity值小于 1 的元素： 透明度小于1的元素，它们会自带一种神秘的力量，创建自己的层叠上下文。transform值不为none的元素： 进行了transform变换的元素，例如旋转、缩放等，也会成为层叠上下文的创建者。filter值不为none的元素： 使用了滤镜的元素，例如模糊、锐化等，同样拥有创建层叠上下文的权力。isolation: isolate的元素： 这个属性明确地告诉浏览器：“我要创建一个独立的层叠上下文！”will-change属性指定了任意 CSS 属性，且该属性的值不是initial的元素：will-change用于提前告知浏览器，该元素可能会发生变化，从而优化性能。如果它指定了会影响层叠的属性，也会创建层叠上下文。contain: layout、contain: paint或contain: strict的元素：contain属性用于限制浏览器对元素的渲染范围，它可以创建新的层叠上下文。
三、层叠顺序的“潜规则”：谁在上面，谁在下面？
当网页中存在多个层叠上下文时，元素的堆叠顺序就变得更加复杂了。浏览器会按照一定的规则来确定每个元素的层叠顺序，这些规则就像CSS世界的“潜规则”，你需要了解它们，才能更好地控制元素的显示效果。
一般来说，元素的层叠顺序遵循以下规则（从后往前，越往后越靠近用户）：
- 根元素的背景和边框： 这是最底层，相当于舞台的背景。
- 建立了层叠上下文的元素的
z-index值为负值的子元素： 这些“负值子元素”会被放在背景之上，但仍然在其他元素之下。它们就像隐藏在幕后的工作人员，默默地支撑着舞台。 - 未定位的、非浮动块级元素： 这些元素按照它们在HTML文档中的顺序依次堆叠。它们就像舞台上的普通演员，按照剧本的安排出场。
- 未定位的、浮动元素： 浮动元素会尽可能地向左或向右移动，直到碰到容器的边缘或其他浮动元素。它们就像舞台上的特技演员，在空中自由飞翔。
- 定位元素（
position: relative,position: absolute,position: fixed,position: sticky），z-index值为auto： 这些元素拥有了“定位”的能力，但它们仍然按照HTML文档中的顺序堆叠。它们就像舞台上的主要演员，拥有固定的位置，但仍然需要按照剧本的安排出场。 - 建立了层叠上下文的元素的
z-index值为 0 的子元素 或z-index值为auto的且建立了层叠上下文的元素： 这些元素就像舞台上的重要道具，它们既有自己的位置，又能够影响其他元素的堆叠顺序。 - 建立了层叠上下文的元素的
z-index值为正值的子元素： 这些“正值子元素”拥有最高的优先级，它们会显示在所有其他元素之上。它们就像舞台上的主角，吸引着所有人的目光。
四、举个栗子：层叠上下文的实战演练
让我们通过一个简单的例子来演示层叠上下文的作用：
<!DOCTYPE html>
<html>
<head>
<title>层叠上下文示例</title>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
border: 2px solid black;
}
.box1 {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: red;
z-index: 1;
}
.box2 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: blue;
}
.box3 {
position: absolute;
top: 80px;
left: 80px;
width: 100px;
height: 100px;
background-color: green;
z-index: 2;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>
</div>
</body>
</html>在这个例子中，.container 创建了一个层叠上下文，因为它设置了 position: relative。.box1 和 .box3 都设置了 z-index 值，而 .box2 没有设置。
按照层叠顺序的规则，.box3 的 z-index 值最大，所以它会显示在最上面。.box1 的 z-index 值为 1，比 .box2 大，所以它会显示在 .box2 的上面。
如果没有 .container 的 position: relative，那么 .box1 和 .box3 的 z-index 值就会相对于根元素进行计算，而不是相对于 .container。
五、层叠上下文的妙用：解决zIndex失效问题
理解层叠上下文的一个重要意义在于，可以帮你解决常见的 z-index 失效问题。
假设你有两个元素，一个父元素和一个子元素，你希望子元素显示在父元素之上，于是你给子元素设置了 z-index: 9999。然而，你却发现子元素仍然被父元素遮挡。
这很可能是因为父元素已经创建了一个层叠上下文。在这种情况下，子元素的 z-index 值只会在父元素的层叠上下文中生效，而不会影响到父元素之外的元素。
要解决这个问题，你可以尝试以下方法：
- 确保父元素没有创建层叠上下文： 移除父元素的
position: relative、opacity < 1、transform等属性。 - 将子元素移到父元素之外： 如果可能的话，将子元素移到父元素的外部，这样它就可以直接与父元素的兄弟元素进行层叠比较。
- 在父元素上设置
position: relative和z-index： 如果父元素必须是定位元素，可以给父元素设置一个z-index值，然后给子元素设置一个更大的z-index值。
六、层叠上下文的“副作用”：性能问题
虽然层叠上下文非常强大，但它也会带来一些性能问题。每次浏览器遇到一个新的层叠上下文时，它都需要重新计算元素的堆叠顺序，这会消耗大量的计算资源。
因此，在编写CSS时，你应该尽量避免创建不必要的层叠上下文。只有在真正需要控制元素的堆叠顺序时，才应该使用 position、opacity、transform 等属性。
七、总结：掌握层叠上下文，成为CSS大师
层叠上下文是CSS中一个非常重要的概念，它决定了元素的堆叠顺序，影响着网页的视觉效果。理解层叠上下文的原理，可以帮助你更好地控制元素的显示效果，解决 z-index 失效问题，并优化网页的性能。
掌握了层叠上下文，你就掌握了CSS世界的一项核心技能，离成为CSS大师的目标更进一步！希望这篇文章能让你对层叠上下文有一个更清晰的认识，并在你的实际项目中发挥它的作用。 现在，去你的代码中探索和实验吧！ 祝你编码愉快！