考察点分析

本题主要考查以下核心能力：

  1. CSS层叠规则理解：掌握z-index生效条件及层叠上下文创建机制
  2. 定位失效场景分析：准确识别导致层叠顺序异常的常见陷阱
  3. 视觉格式化模型认知：理解不同定位方式与浮动元素的层叠关系
  4. 问题诊断能力：通过堆叠顺序图解释复杂覆盖现象

技术评估点：

  • z-index的生效条件与层叠上下文边界
  • 父级容器属性对子元素层叠的影响
  • opacity/transform等属性触发的隐式层叠上下文
  • static定位与浮动元素的默认层叠顺序

技术解析

关键知识点

层叠上下文 > 定位类型 > 浮动元素层叠等级 > DOM树顺序

原理剖析

层叠上下文（Stacking Context）是HTML元素的三维概念，决定了子元素的z轴排列顺序。创建条件包括：

  1. 根元素<html>
  2. position非static且z-index≠auto
  3. opacity<1
  4. transform/filter/perspective属性
  5. flex/grid容器的子项（z-index≠auto时）
层叠顺序（从下到上）：
1. 层叠上下文背景/边框
2. z-index < 0的元素
3. 块级元素（block-level）
4. 浮动元素（float）
5. 内联元素（inline）
6. z-index:auto/0的定位元素
7. z-index > 0的元素

常见误区

  • 误以为z-index在任何定位下都生效
  • 忽略父级层叠上下文造成的隔离效应
  • 混淆浮动元素与定位元素的层叠顺序

问题解答

四种z-index失效场景

  1. 未设置定位属性：元素position为static时z-index无效
  2. 父级限制：父元素形成层叠上下文且层级较低，子元素无法突破
  3. CSS属性隔离：父元素使用opacity/transform等创建隐式层叠上下文
  4. DOM顺序覆盖：同层级且z-index相同时，后面的元素覆盖前面的

层叠顺序关系

static元素作为块级元素处于层叠顺序第三层，浮动元素位于第四层。示例场景：

<div class="static-block">Block Content</div> <!-- 第三层 -->
<div class="float-element">Float</div>       <!-- 第四层 -->

此时浮动元素会覆盖块级元素背景，但块级元素内的文字（内联元素，第五层）会覆盖浮动元素。

堆叠顺序图 

| 层级 | 元素类型                 |
|------|-------------------------|
|  7  | z-index > 0            |
|  6  | 定位元素（z-index:0/auto）|
|  5  | 内联元素                |
|  4  | 浮动元素                |
|  3  | 块级元素                |
|  2  | z-index < 0            |
|  1  | 层叠上下文背景/边框      |

深度追问

  1. 如何检测元素是否创建了层叠上下文？

    • 浏览器DevTools的Layers面板可视化查看

  2. transform属性为何改变层叠顺序？

    • transform触发硬件加速，生成新的渲染层

  3. will-change属性对层叠上下文的影响？

    • 设置will-change: transform/opacity会提前创建层叠上下文
Edit this page

Last updated a month ago. history