伪元素::after无法盖住父元素的根本原因是它与父元素同属一个层叠上下文，且默认渲染在父内容层之下；需通过给父元素设position:relative、避免触发新层叠上下文（如transform/opacity）、合理拆分内容层等手段解决。
伪元素 ::after 的 z-index 为什么“盖不住”父元素？
根本原因不是 z-index 值太小，而是 ::after 和父元素共处同一个层叠上下文，且伪元素默认渲染在父元素内容层之下——它压根没机会“盖上去”，除非你主动打破这个默认顺序。
父元素没设 position: relative 就别谈定位和 z-index
伪元素使用 position: absolute 时，会相对于最近的已定位祖先偏移。如果父元素是 position: static（默认值），::after 可能脱离预期位置，甚至被裁剪或错位；更关键的是，此时 z-index 在未定位容器中完全不参与层叠计算。
- 必须给父元素显式加
position: relative（不改变布局，只提供定位上下文） - 漏掉
content: ""会导致伪元素根本不渲染，z-index更无从谈起 -
::after默认是display: inline，若需宽高/定位生效，得加display: block或inline-block
transform/scale/opacity 让父元素悄悄建了“结界”
只要父元素设置了 transform: scale(1)、opacity: 0.999 或 filter: blur(0)，它就会隐式创建新的层叠上下文——这时 ::after 的 z-index 只在父元素内部有效，无法挑战父元素自身在全局的层级位置。
- 打开 Chrome DevTools → 选中父元素 → «Computed» 面板搜
transform、opacity、filter，看是否非默认值 - 临时注释掉父元素的
transform，若遮挡消失，就确认是它在“关人” - 不要给
::after狂堆z-index: 9999，真正该调的是父元素自身的z-index（比如设为1050）
想让 ::after 盖住父内容？得把内容层“降下去”
伪元素天生属于父元素的层叠上下文，不能靠 z-index 跳出父级去覆盖父的内容区。正确做法是：把原本由伪元素承担的视觉样式（如边框、背景、阴影）移到子元素上，并用分层结构控制层级。
立即学习“前端免费学习笔记（深入）”；
- 父容器（如
.card）只负责transform和定义上下文，不画任何视觉 - 加一个
.card-content子元素，设position: relative+z-index: 1，承载主体样式 -
.card::after仅作底层装饰（如模糊阴影），保持z-index: auto，自然落在内容之下
最常被忽略的点是：你以为在调伪元素的层级，其实真正在动的是父元素是否“自建牢笼”，以及内容是否被合理拆到独立可控的层里。
