<div>与::before伪元素层级异常：需主元素置于伪元素上方

问题原因 #

你的代码里，div设置了transform: translateX(5px)，这会强制创建堆叠上下文；同时z-index:1也会触发堆叠上下文的创建。在这个堆叠上下文内部，伪元素::before的z-index:-1会被放置在div的背景层之上（堆叠上下文的层级顺序是：根元素背景 → 负z-index子元素 → 非定位子元素 → 定位子元素(z-index:auto) → 正z-index子元素）。由于div没有实际内容，伪元素就会显示在div的背景上方，导致重叠部分蓝色覆盖红色，不符合预期。

解决方案 #

以下几种方法都能实现主圆点（左侧红色）在伪元素圆点（右侧蓝色）上方的效果，同时保留主元素在左侧的要求：

方法一：移除transform，直接设置最终偏移量

把left:-11px和transform: translateX(5px)合并为最终的left值，避免触发堆叠上下文：

div, div::before {
  width: 12px;
  height: 12px;
  border: 2px solid white;
  border-radius: 100%;
  background-color: red;
}
div {
  position: relative;
  left: -6px; /* 直接设置最终偏移量，替代原left+transform的组合 */
}
div::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -2px;
  left: 9px;
  background-color: blue;
}

方法二：用margin-left替代transform

保留原left设置，用margin-left替代transform调整位置，避免创建堆叠上下文：

div, div::before {
  width: 12px;
  height: 12px;
  border: 2px solid white;
  border-radius: 100%;
  background-color: red;
}
div {
  position: relative;
  left: -11px;
  margin-left: 5px; /* 用margin-left替代transform，避免触发堆叠上下文 */
}
div::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -2px;
  left: 9px;
  background-color: blue;
}

方法三：保留transform，用::after伪元素做前景层

如果必须保留transform（比如有动画需求），可以给div添加::after伪元素作为主圆点的前景层，覆盖在::before上方：

div, div::before, div::after {
  width: 12px;
  height: 12px;
  border: 2px solid white;
  border-radius: 100%;
  background-color: red;
}
div {
  position: relative;
  z-index: 1;
  left: -11px;
  transform: translateX(5px);
  background-color: transparent; /* 主元素背景设为透明，让::after显示为实际圆点 */
}
div::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -2px;
  left: 9px;
  background-color: blue;
}
div::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: red; /* 继承主元素样式，作为前景圆点 */
}

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