我有位置，但z索引不起作用

Question

我希望外圈能够在圈子后面，但是当我尝试使用z-index时它不起作用。什么都不做我做了2个戒指，一个戒指在圆圈顶部没有顶部，另一个在圆圈后面我只是无法移动它我不知道为什么。

:root{
  --size:200px;
}
#background {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background: linear-gradient(-23.5deg, #000033, #00001a);
  z-index:-2;
}

#background #mainplanet {
  width:var(--size);
  height:var(--size);
  background:#fff;
  position:relative;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
}

#background #mainplanet:before,#background #mainplanet:after{
  content:"";
  width:calc(var(--size) * 1.5);
  height:calc(var(--size) / 2);
  border:30px solid #000;
  position:absolute;
  top:10px;
  left:-80px;
  border-radius:50%;
  transform: rotateX(66deg) rotateY(170deg);
}

#background #mainplanet:before{
  border-top-color:transparent;
}

#background #mainplanet:after{
  z-index:-3;
}

<div id="background">
  <div id="mainplanet">
  </div>
</div>

Answer 1

您需要删除转换并将其替换为其他内容，您将能够移动伪元素：

:root{
  --size:200px;
}
#background {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background: linear-gradient(-23.5deg, #000033, #00001a);
  z-index:-2;
}

#background #mainplanet {
  width:var(--size);
  height:var(--size);
  background:#fff;
  position:relative;
  top:calc(50% - var(--size)/2);
  left:calc(50% - var(--size)/2);
  border-radius:50%;
}

#background #mainplanet:before,#background #mainplanet:after{
  content:"";
  width:calc(var(--size) * 1.5);
  height:calc(var(--size) / 2);
  border:30px solid #000;
  position:absolute;
  top:10px;
  left:-80px;
  border-radius:50%;
  transform: rotateX(66deg) rotateY(170deg);
}

#background #mainplanet:before{
  border-top-color:transparent;
}

#background #mainplanet:after{
  z-index:-3;
}

<div id="background">
  <div id="mainplanet">
  </div>
</div>

正如我们在the specification中读到的那样：

8. 所有定位，不透明度或变换后代，按树顺序分为以下类别： 所有定位的后代都带有'z-index：auto'或'z-index：0'，按树顺序排列。对于那些使用'z-index：auto'的人，将元素视为创建新的堆叠上下文，但实际创建新堆叠上下文的任何定位的后代和后代应该被视为父堆叠上下文的一部分，而不是这个新的堆叠上下文。对于那些'z-index：0'的人，请处理以原子方式生成的堆叠上下文。 所有不透明度后代的不透明度小于1，按树顺序，创建一个原子生成的堆叠上下文。 所有变换后代都使用变换而不是以树的顺序，创建以原子方式生成的堆叠上下文。

因此，这里的技巧是避免定位的伪元素属于其父堆叠上下文，以便能够考虑上层堆叠上下文放置它，因此它可以放在其父层后面。

所以父元素不应该指定z-index，不透明度小于1，使用transform等。

Full list of the properties that create stacking context.