我希望外环位于圆圈后面，但是当我尝试使用时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>
您需要删除变换并将其替换为其他内容，然后您将能够将伪元素移到后面：
: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>
正如我们可能读到的规格:
- All positioned, opacity or transform descendants, in tree order that fall into the following categories:
- 所有使用“z-index: auto”或“z-index: 0”定位的后代，按树顺序排列。对于那些具有“z-index：auto”的元素，将元素视为创建了新的堆叠上下文，但任何定位的后代和实际创建新堆叠上下文的后代都应被视为父堆叠上下文的一部分，不是这个新的。对于那些具有 'z-index: 0' 的堆栈上下文，请以原子方式处理生成的堆栈上下文。
- 所有不透明度小于 1 的不透明度后代，按树顺序，创建一个自动生成的堆叠上下文。
- 除无变换外的所有变换后代，按树顺序，创建一个原子生成的堆栈上下文.
因此，这里的技巧是避免定位的伪元素属于其父堆叠上下文，以便能够考虑上层堆叠上下文来放置它，从而可以放置它在其父级后面.
所以父元素不应该有z-index指定，不透明度小于1，使用transform, etc.
创建堆叠上下文的属性的完整列表。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
