在网页开发中，层叠顺序（Stacking Order） 指的是当多个元素在页面上发生重叠时，浏览器如何决定哪个元素显示在上方，哪个元素显示在下方。这个顺序由 CSS 的 z-index 属性、元素的定位方式 以及 文档流中的位置 共同决定。
浏览器根据一个特定的层叠上下文（Stacking Context）来渲染元素。理解层叠顺序的关键是掌握 层叠上下文 和 层叠水平（Stacking Level）。
📌 标准的层叠顺序（从下到上）
在一个层叠上下文中，元素的绘制顺序遵循以下规则（由底层到顶层）：
- 背景和边框（Backgrounds and borders）
- 包括根元素（
<html>）的背景和边框。
- 包括根元素（
- 普通流中的非定位块级元素（In-flow non-positioned block-level elements）
- 普通文档流中的
div、p、section等。
- 普通文档流中的
- 浮动元素（Floated elements）
- 使用
float: left/right的元素，它们会“浮”在普通流之上。
- 使用
- 普通流中的内联/行内块级元素（In-flow inlines and inline-blocks）
- 如
span、img、button等。
- 如
- 定位元素（Positioned elements）和
z-index: auto的 flex 子项- 使用
position: relative/absolute/fixed/sticky且z-index: auto的元素。 - Flex 容器的子元素如果
z-index为auto，也属于这一层。
- 使用
z-index < 0的定位元素- 显式设置了
z-index为负数的元素，会显示在普通内容之下。
- 显式设置了
z-index: 0或auto的层叠上下文- 创建了新层叠上下文但
z-index为0或auto的元素。
- 创建了新层叠上下文但
z-index > 0的定位元素- 显式设置了正数
z-index的元素，数值越大越靠上。
- 显式设置了正数
🔧 什么是“层叠上下文”（Stacking Context）？
层叠上下文是一个独立的渲染层级，其内部的 z-index 只在该上下文中有效。一旦创建了新的层叠上下文，它的子元素无法“穿透”到外部上下文中，即使 z-index 很大。
常见的创建层叠上下文的方式包括：
- 根元素（
<html>） position: relative/absolute/fixed/sticky+z-index不为autoopacity < 1transform不为nonefilter不为nonewill-change指定了影响层叠的属性isolation: isolatemix-blend-mode不为normalperspective不为noneclip-path使用了非none的剪裁- Flex 或 Grid 容器的子元素（当
z-index不为auto时）
✅ 重点：即使一个元素
z-index: 9999，如果它在一个z-index: 1的层叠上下文中，它也无法盖过另一个z-index: 2的层叠上下文中的元素。
🎯 面试加分点
z-index只对定位元素（position不为static）有效- 如果一个元素
position: static，设置z-index是无效的。
- 如果一个元素
- 层叠顺序是“先画在下，后画在上”
- 浏览器按照顺序逐层绘制，后面的覆盖前面的。
- 负的
z-index可以让元素显示在背景之下- 常用于创建“背景装饰”效果。
- 避免滥用
z-index- 过多使用高
z-index（如9999）会导致维护困难，建议使用语义化的层级管理（如10,20,30）。
- 过多使用高
✅ 总结
网页元素的层叠顺序本质上是由浏览器根据层叠上下文和
z-index等属性，按固定规则从下到上绘制的结果。理解层叠上下文的创建机制，是解决“为什么我的z-index不生效”这类问题的关键。
如果你在面试中能结合一个实际例子（比如模态框被下拉菜单盖住的问题），并解释如何通过调整层叠上下文来解决，会显得更加专业。
THE END
