创建新层叠上下文的css属性包括：position为relative/absolute/fixed/sticky且z-index不为auto；opacity
哪些CSS属性会创建新层叠上下文
不是所有样式都能触发层叠上下文，只有特定属性组合才会。浏览器遇到以下任一条件时，会为该元素创建独立的层叠上下文：
-
position不为static且z-index为具体数值（非auto） -
opacity小于1（哪怕只是0.99） -
transform不为none（如transform: translateZ(0)、scale(1)都算） -
filter不为none（哪怕filter: blur(0)） -
will-change指向上述任一可触发属性（如will-change: transform） -
perspective、clip-path、mask等非默认值
注意：position: relative + z-index: auto 不会创建新上下文；但只要加了 opacity: 0.999，哪怕没写 z-index，也会立刻创建。
为什么用 transform 创建上下文比 z-index 更可靠
直接靠 z-index 创建上下文容易踩坑：比如父容器没设 z-index，只写了 position: relative，那它仍是 z-index: auto，不触发上下文——子元素的 z-index 就只能跟兄弟元素比，无法隔离。
而 transform: translateZ(0) 或 transform: scale(1) 是「无副作用」的强制创建方式：
- 不改变布局、不引发重排，视觉上完全无感
- 100% 触发新上下文，无需关心
z-index值是否被覆盖或继承 - 适合封装组件时统一兜底，比如下拉菜单容器、弹窗 wrapper
示例：.dropdown-wrapper { transform: translateZ(0); } 比 .dropdown-wrapper { position: relative; z-index: 1; } 更可控——后者若被父级 opacity 截断，就失效了。
如何验证某元素是否已创建层叠上下文
光看代码容易误判，必须实测。Chrome / Edge 开发者工具提供直接观测手段：
- 打开「Layers」面板（需在 More Tools → Rendering 中勾选「Paint flashing」和「Layer borders」）
- 或在 Elements 面板中右键元素 → 「Show stacking order」，会高亮显示当前上下文边界
- 若发现预期应隔离的子区域仍被外部元素穿透覆盖，大概率是父级悄悄创建了上下文（比如用了
backdrop-filter却没意识到它等价于filter）
常见漏网之鱼：backdrop-filter、mask-image、contain: paint —— 它们都隐式创建上下文，但不像 transform 那样显眼。
创建上下文后子元素 z-index 还能跨级突破吗
不能。这是最常被忽略的硬约束：一旦父元素创建了层叠上下文，其内部所有子元素的 z-index 只在该上下文内有效，再大也无法盖过同级的其他上下文容器。
比如：.modal { z-index: 9999; } 和 .header { opacity: 0.99; } 同时存在时，即使 .modal 的 z-index 是 9999，只要 .header 在 DOM 中更靠前且已创建上下文，它仍可能压住 .modal 的部分内容。
此时唯一解是调整上下文层级关系本身，而非堆砌子元素 z-index：
- 把
.header的opacity改回1，或改用background-color: rgba(..., 0.99) - 给
.modal的父容器（如body）加z-index并确保它也创建上下文（如加transform: translateZ(0)） - 避免在全局导航、模态框等关键区域使用
opacity或filter，除非你明确需要隔离效果
真正起作用的永远是「谁创建了上下文」，而不是「谁写了更大的数字」。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
