Html 用z指数叠加伪元素

我在使用CSS

z-index

正确堆叠div时遇到问题。在我的代码中，如果我将

.nose:：before

和

.nose:：after

设置为

z-index:-1

，它会将两个div放在堆栈的最后面。但是，我只是将这些div放在

.nose

div后面。以下是我的代码：

*，*：：之后，*：：之前{
框大小：边框框；
保证金：0；
填充：0；
}
html，正文{高度：100%；}
身体{
背景：#44BBA4；
}
.头{
位置：绝对位置；
保证金：自动；
排名：0；
右：0；
底部：0；
左：0；
身高：375px；
宽度：400px；
背景#df9e27；
边界半径：50%；
边框：10px实心#000；
}
.head:：之前，.head:：之后{
内容：“；
位置：绝对位置；
高度：90px；
宽度：90px；
背景#df9e27；
边界半径：50%；
边框：10px实心#000；
z指数：-1；
}
.头：以前{
顶部：-30px；
左：40px；
}
.头：：之后{
顶部：-30px；
右：40px；
}
.眼睛{
位置：绝对位置；
顶部：150px；
高度：25px；
宽度：25px；
背景：#000；
边界半径：50%；
}
.左眼{
左：90px；
}
.眼睛，对{
右：90px；
}
眼睛：以前{
内容：“；
位置：绝对位置；
顶部：-50px；
左：-37px；
高度：100px；
宽度：100px；
边界半径：50%；
边框：12px实心透明；
边框顶部：12px实心#000；
}
.鼻子{
位置：绝对位置；
保证金：自动；
右：0；
左：0；
底部：130像素；
高度：30px；
宽度：30px；
背景：#000；
边界半径：50%；
}
.nose:：之前，.nose:：之后{
内容：“；
位置：绝对位置；
高度：68px；
宽度：73px；
背景：#fff；
边界半径：50%；
边框：10px实心#000；
z指数：-1；
}

---

简而言之：在头部元素上设置z索引。将耳朵移出头部元件

这就是原因

z-index

具有堆叠上下文。每个上下文都有一个根元素（只是任何html元素）。现在，要成为根元素，它必须符合以下任何规则：

• 是
  元素
• 除

  静态

  以外的位置和除

  自动

• 不透明度小于1

因此，默认的堆叠上下文是以

元素作为根

一旦元素位于范围内（换句话说，根元素的子元素），它只能相对于范围内的元素进行定位

将其视为嵌套列表

这里的Wrap是根元素，因为它的position设置为relative，z-index设置为1。它的所有子对象现在都在一个堆栈范围内，并以Wrap作为根

因此，与嵌套列表一样，特定元素的子元素不能出现在其根之前。例如，

Child2

不能出现在

Wrap

之前，因为它的作用域在它的内部。但是它可以出现在

孩子1

之前

现在，在您的案例中，结构如下所示：

请注意，头部不是根，因为它不符合成为根的规则（定位元素也必须具有z索引而不是自动索引）。因此，当您将

-1

的z索引分配给Nose:：before和：：after时，您将得到以下结果：

元素一直位于头部的后面，因为它们位于相同的堆叠范围内。但是它们出现在

Head:：before

的顶部，因为当元素具有相同的z索引时，它们会按照html中的出现顺序进行堆叠

现在，为了防止头部子对象出现在其后面，必须向其添加z索引。这将使它成为新堆栈范围的根元素

但这又带来了另一个问题。现在耳朵放在头顶上。这不可能用css单独解决，因为它们位于头部的堆叠范围内。根永远在它的每一个孩子背后

要解决这个问题，你必须将耳朵移出头部。因此，这意味着，您将无法再使用伪元素（之前和之后）。我建议在头部之外创建耳朵元素，并用其他元素（名为bear？）将所有东西包裹在位置相对的位置上。如果您仍然希望相对于头部定位耳朵，则需要使用包装器

---

答案主要来自。

为什么不将nose

z-index

设置为3，将before/after设置为2？是的，我以前尝试过类似的方法，但出于一些奇怪的原因，它不起作用：(