我有位置，但是z索引不起作用 [英] I have position but z index is not working

问题描述

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

i want the outside ring to go behind the circle, but when I tried to use z-index its not working. not doing anything. I made 2 rings, one ring is on top of the circle without the top, the other one is behind the circle I just can't move it i don't know why.

: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>

推荐答案

您需要删除转换并将其替换为其他内容，然后才能将伪元素移到后面:

You need to remove the transform and replace it with something else and you will be able to move the pseudo-element behind:

: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>

我们可能会在规格:

1. 所有已定位，不透明或变换后代，按树顺序分为以下几类:

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

1. 所有定位的后代，其"z索引:自动"或"z索引:0"以树顺序排列.对于具有'z-index:auto'的用户，将其视为已创建新的堆栈上下文，但任何定位的后代和实际创建新堆栈上下文的后代均应视为父级堆栈上下文的一部分，而不是这个新的.对于那些"z-index:0"的对象，将视为自动生成的堆栈上下文.
2. 所有不透明度小于1的不透明度子代，以树顺序创建原子生成的堆栈上下文.
3. 所有没有树变换的变换子孙，按树顺序，创建原子生成的堆叠上下文.

1. 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.
2. All opacity descendants with opacity less than 1, in tree order, create a stacking context generated atomically.
3. All transform descendants with transform other than none, in tree order, create a stacking context generated atomically.

因此，这里的技巧是避免定位的伪元素属于其父堆栈上下文，从而能够考虑上层堆栈上下文来放置它，从而可以将其放置在其父之后.

So the trick here is to avoid the positioned pseudo-element to belong to its parent stacking context to able to place it considering an upper stacking context thus it can be placed behind its parent.

因此父元素不应指定z-index，不透明度小于1，请使用transform等.

So the parent element should not have z-index specified, opacity less than 1, use transform, etc.

创建的属性的完整列表堆叠上下文.

这篇关于我有位置，但是z索引不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！