opacity小于1、transform不为none、filter不为none、will-change设为相关属性、isolation: isolate、contain属性、position: fixed/sticky且z-index非auto、flex/grid子项显式设z-index均会静默创建堆叠上下文。
哪些CSS属性会静默创建堆叠上下文
只要某个祖先元素设置了以下任一属性，它就会成为新的堆叠上下文根节点——子元素的 z-index 就只在它内部生效，完全无法和外部同级元素竞争。这不是 bug，是 CSS 规范明确行为。
-
opacity小于 1（哪怕opacity: 0.999） -
transform不为none（包括transform: translateZ(0)、scale(1)、rotate(0.0001deg)） -
filter不为none（哪怕filter: blur(0)或blur(0.1px)） -
will-change设为transform、opacity等值 isolation: isolate-
contain: layout paint或contain: strict -
position: fixed或position: sticky且z-index不是auto - flex/grid 容器中，子项显式设置了
z-index（非auto）
为什么 z-index: 0 反而更危险
很多人以为加个 z-index: 0 很“安全”，结果反而制造了新上下文。关键区别在于语义：
-
z-index: auto（默认）不会创建新堆叠上下文，前提是该元素已定位（position非static） -
z-index: 0会强制创建新堆叠上下文——哪怕你只是想“让它参与层叠”，它也立刻成了隔离墙 -
z-index: -1会让元素沉到父上下文的背景和边框之下，常导致内容不可见
如何快速定位哪个父元素在“建墙”
别猜，用 Chrome DevTools 直接验证：
- 选中被遮挡的元素 → 右侧面板 «Computed» → 拉到底看
z-index是否显示为(not applicable)或灰显 - 逐级点击向上父节点 → 右侧面板 «Layout» 标签页里留意 «Stacking context» 是否突然变成
Yes - 打开 «Rendering» 面板 → 勾选 «Show layers panel» → 在 «Layers» 面板里直接看到每个上下文节点，点一下就能高亮对应 DOM 元素
- 临时给可疑父元素加
outline: 1px solid red快速视觉定位，再注释掉transform或opacity看是否恢复
Tailwind 用户特别注意的触发点
Tailwind 的工具类背后就是上述原生属性，容易在无感中建墙：
立即学习“前端免费学习笔记（深入）”；
-
scale-95→ 触发transform: scale(0.95) -
blur-sm→ 触发filter: blur(1px) -
opacity-95→ 触发opacity: 0.95 -
backdrop-blur-md→ 触发backdrop-filter: blur(12px) -
animate-pulse→ 内部含opacity动画，可能中途进入opacity < 1状态
transform 或 opacity ——它不报错、不警告，只默默把你的 z-index 关进盒子。 
