层叠顺序的默认规则

层叠顺序是CSS中一个重要的概念，决定了元素在重叠时的显示优先级。理解默认规则能帮助开发者更高效地控制页面布局和视觉效果。

层叠顺序的基本原理

层叠顺序的默认规则由以下因素决定：

1. 元素类型（如定位元素、浮动元素等）
2. 文档流中的顺序
3. z-index属性的显式设置

在没有人为干预的情况下，浏览器会按照特定顺序堆叠元素。这个顺序从后到前通常是：

/* 默认层叠顺序（从低到高） */
background/borders → 非定位块级元素 → 浮动元素 → 非定位行内元素 → 定位元素

文档流中的默认行为

普通文档流中的元素按照HTML结构顺序层叠：

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

.box1, .box2 {
  width: 200px;
  height: 200px;
  position: relative;
}
.box1 {
  background: red;
  top: 50px;
}
.box2 {
  background: blue;
  margin-top: -100px;
}

在这个例子中，虽然.box1设置了top位移，但.box2因为出现在文档流后面，默认会覆盖.box1。

定位元素的影响

定位元素（position不为static）会创建新的层叠上下文：

<div class="parent">
  <div class="child1">Child 1</div>
  <div class="child2">Child 2</div>
</div>

.parent {
  position: relative;
  height: 300px;
}
.child1 {
  position: absolute;
  z-index: 1;
  background: green;
  width: 200px;
  height: 200px;
}
.child2 {
  position: absolute;
  background: yellow;
  width: 150px;
  height: 150px;
  top: 50px;
  left: 50px;
}

即使.child2在文档流中靠后，由于.child1设置了更高的z-index，它会显示在最上层。

浮动元素的层叠

浮动元素会脱离常规文档流，但有自己的层叠规则：

<div class="float-box"></div>
<p>这是一段文本内容...</p>

.float-box {
  float: left;
  width: 100px;
  height: 100px;
  background: orange;
  margin-right: 20px;
}
p {
  background: rgba(0,0,255,0.5);
}

浮动元素会覆盖在常规块级元素之上，但会被行内元素内容环绕。

z-index的特殊情况

z-index只在定位元素上有效，且受父级层叠上下文限制：

<div class="ctx1">
  <div class="box-a">A</div>
</div>
<div class="ctx2">
  <div class="box-b">B</div>
</div>

.ctx1, .ctx2 {
  position: relative;
}
.ctx1 {
  z-index: 1;
}
.ctx2 {
  z-index: 2;
}
.box-a {
  position: absolute;
  z-index: 100;
  background: pink;
}
.box-b {
  position: absolute;
  z-index: 1;
  background: cyan;
}

虽然.box-a的z-index值更大，但由于其父级.ctx1的z-index小于.ctx2，最终.box-b会显示在上层。

层叠上下文的创建条件

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

• position: relative/absolute/fixed且z-index不为auto
• opacity小于1
• transform不为none
• filter不为none
• isolation: isolate
• will-change指定特定属性

/* 创建层叠上下文的示例 */
.transform-ctx {
  transform: translateZ(0);
}
.opacity-ctx {
  opacity: 0.99;
}
.filter-ctx {
  filter: blur(1px);
}

实际开发中的常见问题

1. 模态框被意外遮挡：

<div class="modal" style="position: fixed; z-index: 1000;"></div>
<div class="third-party-component" style="position: relative; z-index: 9999;"></div>

解决方案是为模态框创建独立的层叠上下文容器。

2. 动画元素显示异常：

@keyframes slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.animated-element {
  animation: slide 1s;
  /* 动画期间会创建层叠上下文 */
}

3. 兄弟元素间的覆盖问题：

<div class="sibling1"></div>
<div class="sibling2"></div>

.sibling1 {
  position: relative;
  z-index: auto; /* 默认值 */
}
.sibling2 {
  position: relative;
  z-index: 1; /* 会覆盖sibling1 */
}

浏览器渲染的底层机制

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

1. 解析HTML构建DOM树
2. 计算样式生成渲染树
3. 根据层叠顺序进行分层
4. 合成图层并绘制

每个层叠上下文会形成独立的渲染层，这对性能优化有重要影响。过度使用z-index可能导致不必要的图层创建。

调试层叠问题的技巧

1. 使用浏览器开发者工具：

• Chrome的Layers面板
• Firefox的3D视图

2. 临时样式辅助调试：

* {
  outline: 1px solid rgba(255,0,0,0.3) !important;
}

3. 诊断层叠上下文：

function isStackingContext(element) {
  const styles = window.getComputedStyle(element);
  return styles.zIndex !== 'auto' && 
         styles.position !== 'static' ||
         parseFloat(styles.opacity) < 1 ||
         styles.transform !== 'none' ||
         styles.filter !== 'none';
}