为何使用::after伪元素会改变背景的覆盖层级？

嘿，这个问题其实是CSS层叠规则和伪元素特性的典型表现，咱们一步步拆解清楚：

1. 用::after伪元素时的渲染逻辑 #

首先你得知道，::after伪元素是附着在容器最后一个子元素位置的「生成内容」——简单说，它相当于容器的一个“虚拟子元素”。而且你设置了top:0、left:0这些定位属性，说明你肯定给伪元素加了position:absolute（不然这些属性根本不会生效）。

当伪元素是绝对定位时，它会脱离正常文档流，并且相对于最近的非static定位的祖先（这里就是你的容器，不然伪元素会相对于视口定位）铺满整个容器。关键来了：绝对定位的元素会创建自己的层叠上下文，它的层叠顺序比正常文档流里的元素（比如那个200px高的内部div）要高，所以自然会覆盖在内部div的上方。再加上你给伪元素设了100%宽高，刚好填满容器，看起来就像背景色盖过了内部div。

另外，就算你没手动设z-index，绝对定位元素的默认层叠优先级也比正常流的子元素高，这也是它能“压”在上面的原因。

2. 直接给容器加背景色的情况 #

这时候就回到CSS的基础渲染规则了：元素的背景层是绘制在内容层下方的。内部div是容器的子元素，属于容器的“内容部分”，所以内部div会直接盖在容器的背景色上面——这其实是符合规范的，只是和伪元素的场景对比起来，显得有点反直觉而已。

核心差异一句话总结 #

• 容器背景色：属于元素的「背景层」，优先级低于内容层（内部子元素）
• ::after伪元素（绝对定位）：属于容器的「虚拟子元素」，且脱离文档流，层叠顺序高于正常流的内部子元素，所以会覆盖在上方

给你贴个简化的代码示例，一看就懂：

.container {
  position: relative; /* 让伪元素相对它定位，这步很关键 */
  /* 如果直接加背景色，会在内部div下面 */
  /* background-color: #ff4444; */
}

.container::after {
  content: ""; /* 伪元素必须有content才会显示，别漏了！ */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff4444;
  /* 可以手动设z-index强化优先级，不加其实也能覆盖 */
  z-index: 1;
}

.inner-div {
  height: 200px;
  background-color: #33b5e5;
}

这个例子里，红色伪元素会盖在蓝色内部div上；要是把伪元素注释掉，给容器加红色背景，蓝色div就会压在红色上面。

内容的提问来源于stack exchange，提问作者Dog