层叠上下文
> Last Format Time：6/25/2026 19:48:41
在 CSS 中，层叠上下文（Stacking Context）是 HTML 元素在三维空间（Z轴）上的堆叠管理单元。
核心特性
- 独立性：每个层叠上下文形成一个独立的堆叠区域，内部元素的层叠顺序仅在该上下文内部进行比较。
- 父级限制：子元素的
z-index受其父级层叠上下文的限制。不同层叠上下文之间的z-index值无法直接跨级比较。
常见的触发条件
并非所有元素都会创建层叠上下文，以下情况会触发新的层叠上下文：
- 根元素：文档的
<html>元素会自动创建根层叠上下文。 - 定位元素 + z-index：
position属性为relative、absolute、fixed或sticky，且z-index的值不为auto的元素。 - CSS3 特定属性：
opacity小于 1（例如opacity: 0.9）。transform不为none（例如transform: scale(1.2)）。filter、backdrop-filter、perspective、clip-path、mask等属性不为none。mix-blend-mode不为normal。
- 其他属性：
isolation: isolate（专门用于强制创建独立层叠上下文）。will-change指定了上述可能触发层叠上下文的属性。- Flex/Grid 容器及其子项（当子项
z-index非auto时）。
同一上下文内的层叠顺序
在同一个层叠上下文中，元素的堆叠顺序从低到高依次为：
- 层叠上下文的根元素（背景与边框）。
z-index为负的定位元素。- 普通块级元素（非定位）。
- 浮动元素。
- 普通内联/行内块元素。
z-index: auto或z-index: 0的定位元素。z-index为正的定位元素（数值越大越靠前）。
常见陷阱与解决方案
一个最常见的问题是：即使某个元素的 z-index 设置得非常高（如 9999），它依然可能被另一个层级较低的元素遮挡。这通常是因为该元素嵌套在一个竞争性的层叠上下文中，其 z-index 仅在父级内部生效，无法穿透到外部。
解决思路：将需要置顶的元素（如模态框、弹窗）移动到 HTML 结构中，使其与需要重叠的目标元素处于同一层级，或者直接放置在 <body> 标签下方，从而避免被嵌套在受限的层叠上下文中。
https://www.bilibili.com/video/BV1sKJ56PEyq/?spm_id_from=333.1007.tianma.2-2-5.click&vd_source=47c9acd507be61251cd2bb730416395c 
z-index 管理
DOM order
对于静态的展示，我们可以直接调整DOM order，而不是去用z-index去管理： 
isolation
isolation: isolate（专门用于强制创建独立层叠上下文）
全局 z-index token
