<div> 及其 ::before

Question

我有两个来自

div

及其

::before

的重叠点，并且希望左/主点出现在右/伪点的 ON TOP 上。

div, div::before {
  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);
}
div::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -2px;
  left: 9px;
  background-color: blue;
}

<div></div>

由于两者都是相对或绝对定位，我预计不同的 z-index 值会导致左/主点出现在右/伪点的顶部（这就是我想要的）。

（我需要主点位于左侧是有原因的，所以我不想切换主点/伪点。）

Answer 1

在 div 上使用

transform-style: preserve-3d

并在之前使用

transform: translateZ(-1px)

怎么样？

div, div::before {
  width: 12px;
  height: 12px;
  border: 2px solid white;
  border-radius: 100%;
  background-color: red;
}
div {
  position: relative;
  left: -11px;
  transform: translateX(5px);
  transform-style: preserve-3d;
}
div::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 9px;
  background-color: blue;
  transform: translateZ(-1px);
}

<div></div>