Question

我无法使用CSS z-index正确堆叠我的div。在我的代码中，如果我将.nose::before和.nose::after设置为z-index: -1，它会将两个div放在堆栈的最后面。但是，我只是将这些div放在.nose div后面。这是我的代码：

＆＃13;

*, *::after, *::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body { height: 100%; }

body {
  background: #44BBA4;
}

.head {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 375px;
  width: 400px;
  background: #df9e27;
  border-radius: 50%;
  border: 10px solid #000;
}

.head::before, .head::after {
  content: "";
  position: absolute;
  height: 90px;
  width: 90px;
  background: #df9e27;
  border-radius: 50%;
  border: 10px solid #000;
  z-index: -1;
}

.head::before {
  top: -30px;
  left: 40px;
}

.head::after {
  top: -30px;
  right: 40px;
}

.eye {
  position: absolute;
  top: 150px;
  height: 25px;
  width: 25px;
  background: #000;
  border-radius: 50%;
}

.eye.left {
  left: 90px;
}

.eye.right {
  right: 90px;
}

.eye::before {
  content: "";
  position: absolute;
  top: -50px;
  left: -37px;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  border: 12px solid transparent;
  border-top: 12px solid #000;
}

.nose {
  position: absolute;
  margin: auto;
  right: 0;
  left: 0;
  bottom: 130px;
  height: 30px;
  width: 30px;
  background: #000;
  border-radius: 50%;
}

.nose::before, .nose::after {
  content: "";
  position: absolute;
  height: 68px;
  width: 73px;
  background: #fff;
  border-radius: 50%;
  border: 10px solid #000;
  z-index: -1;
}

＆＃13;

<div class="head">
  <div class="eye left"></div>
  <div class="eye right"></div>
  
  <div class="nose"></div>
</div>

＆＃13;

Answer 1

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

这就是原因。

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

是<html>元素
static以外的位置和auto以外的z-index
不透明度小于1

因此，默认堆叠上下文以<html>元素为根。

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

将其视为嵌套列表。

z-index scoping list

包裹这里是一个根元素，因为它的位置设置为relative，z-index为1.并且它的所有子节点现在位于堆叠范围内，并将Wrap作为根。

因此，就像在嵌套列表中一样，特定元素的子元素不能出现在它的根之前。例如，Child2无法显示在Wrap之前，因为它位于其中。但它可以出现在Child1之前。

现在，在您的情况下，结构如下：

请注意，head不是root用户，因为它不符合成为一个的规则（定位元素也必须具有除auto之外的z-index）。因此，当您将-1的z-index分配给Nose :: before和::之后：

元素一直位于Head后面，因为它们处于相同的堆叠范围内。但是它们出现在Head::before之上，因为当元素具有相同的z-index时，它们会根据html中的出现顺序堆叠。

现在，为了防止头部儿童出现在其后面，您必须为其添加z-index。这将使其成为新堆叠范围的根元素。

但这会产生另一个问题。现在耳朵位于头顶。单独使用css是不可能解决的，因为它们位于头部的堆叠范围内。而且根总是落在每个孩子身后。

要解决这个问题，必须将耳朵移出头部。所以，这意味着，你将无法使用伪元素（之前和之后）。我建议在头部之外创建耳朵元素并将所有内容包装在一些其他元素（名为bear？）中，并且位置相对。如果你仍然想要相对于头部定位耳朵，则需要包装。

答案主要受this article启发。

使用z-index堆叠伪元素

1 个答案: