伪元素的z-index无法脱离宿主元素层叠上下文；因其无独立dom节点，完全继承宿主上下文，若宿主父级含transform、opacity
伪元素的z-index根本不能脱离宿主元素的层叠上下文
伪元素（::before、::after）没有独立 DOM 节点，它天然绑定在宿主元素内部，完全继承其层叠上下文。哪怕你给伪元素写了 z-index: 9999，只要宿主元素本身被父级创建了新层叠上下文（比如带 transform: scale(1.05) 或 opacity: 0.99），它的所有子内容——包括伪元素——就只能在这个“小房间”里比高低，出不去。
常见误操作：
– 给 .card::after 设 z-index: 10，但 .card 父容器有 transform: translateZ(0)
– 在 hover 动画里用 scale 触发硬件加速，却没同步处理伪元素的层级归属
宿主元素一加 transform，伪元素就“失联”
iOS Safari 和部分 Chromium 版本对 transform + 伪元素 + z-index 的组合特别敏感：一旦宿主元素设置了任何非 none 的 transform（哪怕是 translateZ(0) 或 scale(1)），它立刻创建新层叠上下文，而伪元素无法通过 z-index 跳出去和兄弟元素竞争。
- 临时验证：把宿主元素的
transform改成transform: none !important，看伪元素是否立刻“浮上来” - 真机必测：模拟器常不触发该问题，但 Safari 真机上会直接失效
- 替代方案：用
translateX/translateY替代translateZ(0)，前者不强制创建层叠上下文
想让伪元素盖住内容？别硬调 z-index，改结构
强行提升伪元素的 z-index 多数时候是徒劳。真正可控的做法是把视觉层和内容层物理分离：
- 把原本靠
::before实现的边框/阴影/蒙版，抽成一个同级<div class="decoration"></div>元素 - 给这个新元素显式设
position: absolute和合理z-index（如z-index: 1） - 确保它的父容器（如
.card）设position: relative，但不设transform或opacity - 内容区域（文字、链接）保持默认
z-index: auto，自然落在装饰层下方
这样既绕过伪元素的上下文锁死，又保留语义清晰的 DOM 结构。
Tailwind 用户注意：@layer 指令不能覆盖伪元素的层叠行为
Tailwind 中写 before:z-10 或 after:z-20 看似生效，实则受限于宿主元素的层叠上下文——如果宿主用了 scale 或第三方组件自带 opacity: 0.95，这些类名生成的 CSS 根本起不了全局作用。
- 检查
tailwind.config.js中是否误配了theme.zIndex：必须是完整对象，且键值为字符串，例如{ 'overlay': '50' }，否则z-50类不会生成 - 更关键的是：Tailwind 不会自动给宿主元素加
position: relative，你得手动补上，否则z-*对伪元素无效 - 改完配置后必须重启开发服务器，Tailwind 不热重载
tailwind.config.js
最易被忽略的一点：伪元素的层级问题，从来不是“它自己不够高”，而是它被宿主关进了一个别人看不见的小盒子——修盒子，比修里面的东西重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
