使用z-index堆叠伪元素

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

*, *::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; 
 
}

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

来源

2017-03-10 Hudson Taylor

为什么不只是将鼻子'z-index'设置为3以及将之前/之后设置为2？ –

是的，我已经尝试过这样的事情，出于一些奇怪的原因，它不工作:( –

简而言之：你的头元素组Z指数。将耳朵移出头部元件。

这是为什么。

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

是<html>元件
其他位置比static和比auto
不透明度等的z-index小于1

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

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

把它想象成一个嵌套列表。

z-index scoping list

裹这里是一个根元素，因为它的位置设定为相对和z指数为1。现在，所有的孩子都用保鲜膜堆叠范围为根内。

因此，就像在嵌套列表中一样，特定元素的子元素不能出现在其根目录之前。例如，Child2不能出现在Wrap之前，因为它在其范围内。但它可以出现在Child1之前。现在

，你的情况的结构如下：

注意，头不是根，因为它不与遵守规则的成为一体（定位的元素也必须有自动以外的z-index）。因此，当您之前分配的-1鼻子:: Z-index和::你在这之后：

的元素都被放置在头之后一路，因为它们是在同一堆叠范围。但是它们出现在Head::before之上，因为当元素具有相同的z-index时，它们按照html中的出现顺序堆叠。

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

但是这创造了另一个问题。现在耳朵位于头顶。这是不可能用css单独解决的，因为它们在头部的堆叠范围内。根源总是落在每个孩子的后面。

要解决这个问题，您必须将耳朵从头部移开。因此，这意味着，您将无法再使用伪元素（之前的&）。我建议在头部之外创建耳朵元素，并将所有其他元素（称为熊？）包裹在相对位置。如果您仍然想要相对于头部定位耳朵，则需要包装。

答案主要受this article的启发。

来源

2017-03-23 02:39:14

使用z-index堆叠伪元素

回答

相关问题