层叠顺序的默认规则

层叠顺序是CSS中一个关键概念，决定了元素在重叠时的显示优先级。理解默认规则能避免布局中的意外覆盖问题，尤其在复杂结构中更为重要。

默认层叠顺序的基准

当元素未设置z-index且未形成层叠上下文时，浏览器按DOM流顺序渲染。后出现的元素会覆盖先出现的元素：

<div class="box box1">第一个盒子</div>
<div class="box box2">第二个盒子</div>

.box {
  position: absolute;
  width: 200px;
  height: 200px;
}
.box1 {
  background: red;
  top: 50px;
  left: 50px;
}
.box2 {
  background: blue;
  top: 100px;
  left: 100px;
}

此时蓝色盒子会覆盖红色盒子，因为它在DOM中靠后。

层叠上下文的创建条件

以下属性会创建新的层叠上下文：

• position: relative/absolute/fixed + z-index不为auto
• position: fixed（无需z-index）
• opacity小于1
• transform不为none
• filter不为none
• will-change指定特定属性

.parent {
  position: relative;
  z-index: 1; /* 创建层叠上下文 */
}
.child {
  position: absolute;
  z-index: 999; /* 只在父上下文中生效 */
}

标准层叠顺序规则

从底层到顶层的默认顺序：

1. 形成层叠上下文的元素的背景和边框
2. z-index为负的子层叠上下文
3. 常规流中的块级元素
4. 浮动元素
5. 常规流中的行内元素
6. z-index: auto或0的定位元素
7. z-index为正的子层叠上下文

<div class="stacking-context">
  <div class="negative-z">负z-index</div>
  <div class="block">块级元素</div>
  <span class="inline">行内元素</span>
  <div class="float">浮动元素</div>
  <div class="positioned">定位元素</div>
</div>

.stacking-context {
  position: relative;
  z-index: 0;
}
.negative-z {
  position: absolute;
  z-index: -1;
}
.float {
  float: left;
}
.positioned {
  position: absolute;
  top: 0;
}

z-index的陷阱

z-index只在同级层叠上下文中比较有效。不同层叠上下文中的z-index互不影响：

<div class="ctx1">
  <div class="high-z">z-index:100</div>
</div>
<div class="ctx2">
  <div class="low-z">z-index:1</div>
</div>

.ctx1 { position: relative; z-index: 1; }
.ctx2 { position: relative; z-index: 2; }
.high-z { z-index: 100; }
.low-z { z-index: 1; }

此时low-z元素会覆盖high-z，因为其父级层叠上下文具有更高z-index。

特殊属性的影响

某些CSS属性会改变默认层叠行为：

• mix-blend-mode会创建新的堆叠层
• isolation: isolate强制创建独立层叠上下文
• contain: paint也会创建层叠上下文

.blend-mode {
  position: relative;
  mix-blend-mode: multiply; /* 创建新层叠层 */
}
.isolated {
  isolation: isolate; /* 隔离层叠上下文 */
}

实际应用案例

模态框的实现需要理解层叠顺序：

<div class="content">页面内容</div>
<div class="overlay"></div>
<div class="modal">模态框</div>

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100;
}
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
}

浏览器渲染流程

浏览器绘制元素时遵循以下步骤：

1. 解析DOM树并构建渲染树
2. 对渲染树进行分层处理
3. 按照层叠顺序合成各层
4. 最终绘制到屏幕上

// 可通过浏览器API查看层叠顺序
console.log(getComputedStyle(element).zIndex);

调试层叠问题

Chrome开发者工具中：

1. 使用Layers面板查看分层情况
2. 在Elements面板中查看z-index值
3. 通过document.defaultView.getComputedStyle(element)获取计算样式

// 检查元素是否创建层叠上下文
function isStackingContext(element) {
  const style = getComputedStyle(element);
  return style.position === 'fixed' ||
    (style.zIndex !== 'auto' && 
     ['relative', 'absolute', 'fixed'].includes(style.position)) ||
    parseFloat(style.opacity) < 1 ||
    style.transform !== 'none' ||
    style.filter !== 'none';
}

性能优化考虑

过度使用z-index会导致：

1. 增加浏览器合成层数量
2. 可能触发不必要的重绘
3. 增加内存消耗

建议：

• 尽量减少层叠上下文层级
• 避免使用极高的z-index值（如9999）
• 使用will-change优化预期变化

.optimized {
  will-change: transform; /* 提示浏览器提前优化 */
}