为何伪元素覆盖父元素？如何将::after伪元素移至父元素下方？

要让::after伪元素（绿色方块）显示在父div（蓝色方块）下方，需调整两处关键设置：

• 移除父元素的z-index：若父元素同时设置position: relative和z-index，会生成独立堆叠上下文，伪元素作为子元素无法突破该上下文跑到父元素下方。
• 调整伪元素的定位与层级：将top设为100%，让伪元素紧贴父元素底部；设置z-index: -1，让它处于父元素的下层。

修改后的完整代码：

.parent {
  height: 100px;
  width: 100px;
  background: blue;
  position: relative;
  /* 移除z-index，避免创建独立堆叠上下文 */
}

.parent::after {
  position: absolute;
  top: 100%; /* 定位到父元素底部下方 */
  background: green;
  content: '';
  height: 40px;
  width: 40px;
  z-index: -1; /* 让伪元素处于父元素下层 */
}

<div class="parent"></div>

原理补充 #

当父元素未设置z-index时，即便使用position: relative也不会创建独立堆叠上下文，此时伪元素的z-index: -1会使其被父元素背景覆盖，自然显示在下方；top: 100%基于父元素高度计算，刚好实现“紧贴父元素下方”的布局效果。

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