указано, непрозрачность менее 1 или использовать

у, чтобы внешнее кольцо ушло за круг, но когда я попытался использовать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>

Ответы на вопрос(1)

Ваш ответ на вопрос