我有位置，但是z索引不起作用
我希望外圈在圆圈后面，但是当我尝试使用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>
正如我们在规范中所读到的：
- 以树顺序的所有 position ，opacity或 transform子代 ，分为以下类别：
- 所有以“ z-index：auto”或“ z-index：0”排列的后代，按树顺序排列。对于那些使用“
z-index：auto”的元素，将其视为已创建新的堆栈上下文， 但是任何定位的后代和实际创建新堆栈上下文的后代均应视为父堆栈上下文的一部分
，而不是此新 堆栈上下文的一部分。 。对于“ z-index：0”的对象，将视为自动生成的堆栈上下文。- 所有不透明度小于1的不透明度子代，以树顺序创建原子生成的堆栈上下文。
- 所有具有除非以外的其他变换的变换后代，均以树顺序 创建原子生成的堆栈上下文 。
因此，此处的技巧是避免定位的伪元素属于其父堆栈上下文，从而能够考虑较高的堆栈上下文来放置 它， 从而可以将 其 放置 在其父 堆栈的
后面 。
因此父元素不应该z-index指定，不透明度小于1，请使用transform等等。
-
问题内容： 我打开控制台（chrome \ firefox）并运行以下行： 内容未包含在#popupFrame中，这使它变得很奇怪。 目标是创建像firefox这样的警告框 问题答案： 第二个div是（默认值），因此z-index不适用于它。 您需要定位（将位置属性设置为，而不是在这种情况下可能需要的其他位置）要分配给的任何内容。
-
问题内容： 我有一个默认位置（即）和一个位置。 如果设置元素的z索引，似乎不可能使固定元素位于静态元素之后。 我可以通过 在static元素上使用来解决此问题 ，但是有人可以告诉我 为什么会 这样吗？ （似乎有一个与此问题类似的问题，固定位置破坏了z-index，但是它没有令人满意的答案，因此我在这里用示例代码来询问） 问题答案： 这个问题可以通过多种方式解决，但实际上，了解堆叠规则可以使您找到最
-
问题内容： 根据flexbox规范： ..4.3。Flex Item Z-Ordering，…和其他值（即使是，也不会 创建堆叠上下文）。 因此，我认为/ 应该与flexbox一样正常工作，但是当我将它应用于此HTML / CSS时它不起作用（我的目标是放在创建两层之上）： 我在flex属性上使用了适当的前缀。我不明白为什么它不起作用。 问题答案： 就像你在你的问题中写道，元素 并不 需要被定位为
-
创建由4个相等部分组成的着陆页（Divs）。当你悬停在一个部分上时，它的大小应该会增加，而其他部分的大小会减少（高度或宽度取决于它在悬停div中的位置。 两个问题......1.高度的减少不起作用（宽度的减少起作用）2.悬停时，顶部两个部分在底部两个部分后面展开。底部的两个部分在顶部的两个部分展开，这是我想要的
-
问题内容： 我正在尝试将ID为“ absPos”的div相对于其父div放在绝对位置。但它不起作用，div放置在页面的左上角。 我的代码示例如下 您能帮我解决这个问题吗？在我的实际情况下，我必须放置背景图像，而不是红色背景色。 问候 问题答案： 绝对定位的元素从其最近的祖先开始定位。在您的代码中，祖先都不是“定位”元素，因此div从body元素（即）偏移。 解决方案是将其应用于父div，这迫使它成
-
问题内容： 我正在围绕ElasticSearch的管理客户端编写一个简单的Java包装器。为了测试它，我有一个主要方法，该方法首先检查索引是否存在（IndicesExistsRequest），如果存在则将其删除（DeleteIndexRequest），然后再次创建索引。请参见下面的代码。但是我一直得到IndexAlreadyExistsException。 顺便说一句，我正在尝试为您从命令提示符启