伪元素默认不创建层叠上下文，z-index无效；须父元素触发层叠上下文（如position+非auto z-index）后，伪元素才可通过z-index参与排序。
伪元素（如 ::before 和 ::after）默认不参与常规的层叠上下文（stacking context）排序，直接给它们设 z-index 是无效的——除非父元素已建立层叠上下文。
伪元素本身不能独立创建层叠上下文，它的显示层级完全由其父元素决定。只有当父元素具有以下任一属性时，才会生成新的层叠上下文，此时伪元素才能通过 z-index 与同级元素（包括兄弟元素、其他伪元素）正确排序：
position 值为 relative、absolute、fixed 或 sticky
z-index 值不为 auto（即设为具体数字）opacity 、<code>transform、filter 等）
下面写法是无效的：
.box::before {因为伪元素没有自己的层叠上下文，且其层级受父元素在文档流中的位置和父元素是否建上下文双重约束。解决方法是：确保父元素已定位并设置了 z-index，再统一用 z-index 控制父子及兄弟间的顺序。
立即学习“前端免费学习笔记（深入）”；
以「按钮上浮图标 + 遮罩层」为例，让 ::before 图标显示在内容之上，而 ::after 遮罩层压在最底下：
position: relative 和一个明确的 z-index（如 1）::before 设 position: absolute，并用 z-index: 2 提升（它会相对于父元素层叠上下文生效）::after 同样设 position: absolute，但用 z-index: 0 或负值，使其沉底z-index 在全局中合理遇到伪元素“被盖住”时，可临时添加视觉标记辅助判断：
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
680
收藏
