伪元素的z-index受父元素层叠上下文限制，无法突破其边界；父元素设置transform、opacity等会创建新层叠上下文，使伪元素仅在该上下文中排序，需通过结构调整或真实子元素替代来解决层级问题。
伪元素的z-index根本不受父元素外部影响
伪元素（::before、::after）没有独立 DOM 节点，它天然绑定在宿主元素内部，属于该元素的层叠上下文。一旦父元素因 transform（如 scale(1)）、opacity、filter 等属性创建了新层叠上下文，伪元素的 z-index 就只能在这个“房间”里排序——它压不住父元素本身，更压不住兄弟或祖先容器里的其他元素。
常见现象包括：
-
::before设了z-index: 999，但依然被父容器的背景色盖住 - 父元素加了
transform: translateY(0)后，下拉菜单里的伪元素突然“沉底” - DevTools 的 Computed 面板里，伪元素的
z-index显示为auto或not applicable
父元素缩放（transform）是伪元素层级失效的高频诱因
transform 属性只要不是 none，就会强制创建层叠上下文——哪怕只是 transform: scale(1) 或 translateZ(0)。这时伪元素和内容子元素都被锁死在同一上下文中，谁在上取决于它们在该上下文内的绘制顺序，而不是全局 z-index 大小。
实操建议：
- 临时删掉父元素的
transform，看伪元素是否立刻“浮出水面” - 用 Chrome DevTools 的 «Layers» 面板勾选 «Show layers panel»，直接看到哪个节点建立了上下文
- 避免对容器级元素滥用
will-change: transform，它比transform更容易隐式触发上下文
真正有效的解法是分层结构，不是调高z-index
不要试图给 ::before 加 z-index: 9999 去“硬刚”父容器——它没出口。正确路径是把视觉责任从伪元素转移到真实子元素，并用显式定位控制层级关系。
例如重构卡片结构：
.card { position: relative; } /* 创建上下文，但不靠它渲染视觉 */
.card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } /* 底层装饰，不抢内容 */
.card-content { position: relative; z-index: 1; } /* 内容层，自然盖过 ::before */
关键点：
- 把边框、背景、阴影等原本放在伪元素上的样式，移到
.card-content上 - 用
position: relative+z-index控制真实子元素的层级，比依赖伪元素可靠得多 - 如果必须用伪元素做遮罩或投影，确保它默认处于底层（
z-index: -1或不设），内容层主动“上浮”
负z-index伪元素被裁剪？检查父容器overflow
想让伪元素当“底层蒙版”，设 z-index: -1 很常见，但容易被父容器的 overflow: hidden 或 overflow: auto 直接裁掉——因为 overflow 非 visible 会创建新的层叠上下文，同时限制子元素的绘制边界。
验证方式：
- 临时给父容器加
overflow: visible，看伪元素是否重现 - 若不能改
overflow，就把伪元素的视觉效果（如渐变遮罩）改用background或mask实现 - 注意：伪元素无法脱离宿主元素的盒模型范围，它的尺寸和裁剪始终受父容器约束
真正卡住伪元素层级的，从来不是数值不够大，而是它被父元素的层叠上下文和盒模型双重锁定。调试时优先查父级是否建了“结界”，再决定是删样式、挪结构，还是换实现方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
