伪元素的z-index无法脱离宿主元素层叠上下文；因其无独立dom节点，完全继承宿主上下文，若宿主祖先含transform、opacity
伪元素的z-index根本不能脱离宿主元素层叠上下文
伪元素（::before、::after）没有独立 DOM 节点，它完全依附于宿主元素，继承其层叠上下文。哪怕你给 .card::after 写了 z-index: 9999，只要宿主元素（比如 .card）的任意祖先触发了新层叠上下文，这个值就只在那个“小房间”里起作用。
常见误操作包括：
- 宿主父容器设置了
transform: translateZ(0)或scale(1) - 宿主本身加了
opacity: 0.99（哪怕只差 0.01） - 用
will-change: transform做动画预判，却没意识到它也创建上下文
iOS Safari 和部分 Chromium 版本对这类组合尤其敏感：真机上 transform: scale(1) 就足以锁死伪元素层级，而模拟器可能完全不报错——务必真机测试。
如何快速定位是哪个父级“关住了”伪元素
打开 Chrome DevTools，在 Elements 面板中从伪元素出发，逐级向上点击父节点，观察右侧面板「Layout」标签页里的「Stacking context」是否突然变成 Yes。
重点关注那些：
- 没写
z-index却显示 Yes 的节点 - 样式里带
opacity、transform、filter、will-change的祖先 - Tailwind 类如
scale-100、backdrop-blur-sm、opacity-95—— 它们背后都是触发属性
临时验证法：在 DevTools 中右键禁用可疑父级的 transform 或 opacity，看伪元素是否立刻“浮上来”。如果生效，问题就定位到了。
别硬调伪元素的z-index，改结构更可靠
强行提升 ::after 的 z-index 多数时候是徒劳。真正可控的做法是把视觉装饰层和内容层物理分离：
- 把原本靠
::before实现的边框/遮罩/箭头，抽成一个同级<div class="decoration"></div> - 给这个新元素设
position: absolute和显式z-index（如z-index: 1） - 确保它的父容器（如
.card）设position: relative，但**不设transform或opacity ** - 内容区域保持
z-index: auto，自然落在装饰层下方
这样既绕过伪元素的上下文锁死，又保留语义清晰的 DOM 结构。Tailwind 用户注意：before:z-10 这类工具类在宿主被隔离时完全无效，别依赖它“蒙混过关”。
Tailwind 中伪元素 z-index 失效的隐藏陷阱
Tailwind 的 before:z-* 类名生成的 CSS 规则，受限于宿主元素的层叠上下文——即使配置正确，也无法突破父级限制。
排查要点：
- 检查
tailwind.config.js中theme.zIndex是否为完整对象且键值是字符串，例如{ 'overlay': '50' }；写成modal: 50（数字）或漏引号都会导致规则不生成 - 确认宿主元素本身有没有被第三方组件注入
opacity: 0.95或transform: scale(1)—— 这类样式常藏在node_modules里，DevTools 里能看到但源码难追溯 - 改完配置后必须重启开发服务器，Tailwind 不热重载
theme变更
最易被忽略的一点：伪元素的层级问题，往往不是你写的 CSS 有错，而是你没意识到某个“看不见”的父级已经把它关进了独立上下文——它不报错、不警告，只是安静地失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
