我有位置，但 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

你需要把这个transform去掉，换成别的东西，你就可以把伪元素移到后面了：

: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 中读到的那样：

All positioned, opacity or transform descendants, in tree order that fall into the following categories:

All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order. For those with 'z-index: auto', treat the element as if it created a new stacking context, but any positioned descendants and descendants which actually create a new stacking context should be considered part of the parent stacking context, not this new one. For those with 'z-index: 0' treat the stacking context generated atomically.

All opacity descendants with opacity less than 1, in tree order, create a stacking context generated atomically.

All transform descendants with transform other than none, in tree order, create a stacking context generated atomically.

所以这里的技巧是避免定位的伪元素属于它的父堆栈上下文，以便能够考虑上层堆栈上下文来放置它，因此它可以被放置在它的父元素后面[=34] =].

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

Full list of the properties that create stacking context.

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

I have position but z index is not working

html

css

z-index