关于div的border与background关系：为何C的边框无法覆盖B的背景？

问题场景 #

• A是带.active类的div
• B是普通div
• C是A的::after伪元素，设置了白色右上边框，但被B的蓝色背景遮挡无法正常显示

原因分析 #

这是堆叠上下文层级冲突导致的：

1. 所有设置了position: relative的.step元素都会创建独立的堆叠上下文。
2. C作为A的伪元素，属于A的堆叠上下文内部元素，它的z-index:3仅在A的上下文范围内生效，无法跨上下文和B的堆叠层级竞争。
3. 在flex布局中，B是A的同级兄弟元素，且在文档流中位于A之后，默认情况下后出现的兄弟元素堆叠层级更高，因此B的背景会覆盖在C之上。

解决方案 #

给带.active类的.step设置更高的z-index，让整个A的堆叠上下文层级超过B，这样C就能正常显示在B上方：

修改后的CSS代码：

.step {
  height: 60px;
  width: 300px;
  background-color: blue;
  position: relative;
  text-align: center;
}

.step::after {
  content: "C";
  color: red;
  display: block;
  width: 60px;
  height: 60px;
  background-color: blue;
  position: absolute;
  top: 0;
  right: -30px;
  transform: rotate(45deg);
  box-sizing: border-box;
  z-index: 3;
  border-top: 16px solid #fff;
  border-right: 16px solid #fff;
  background-clip: padding-box
}

.step.active {
  background-color: #f7f7f7;
  z-index: 1; /* 新增：提升A的堆叠层级 */
}

.step.active::after {
  background-color: #f7f7f7;
}

HTML代码保持不变：

<div style="display: flex; margin-top: 20px;">
  <div class="step active">
    A
  </div>
  <div class="step">
    B
  </div>
</div>

添加z-index:1后，A的堆叠上下文层级高于B，C作为A的子元素就能顺利覆盖B的背景，白色边框会正常显示。

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