使用z-index堆叠伪元素
[英]stacking pseudo-elements with z-index
问题描述
I am having trouble properly stacking my divs using CSS z-index . 
我无法使用CSS z-index正确堆叠我的div。 In my code, if I set .nose::before and .nose::after to z-index: -1 , it puts the two divs at the very back of the stack. 在我的代码中，如果我将.nose::before和.nose::after为z-index: -1 ，它会将两个div放在堆栈的最后面。 However, I just these divs to sit behind the .nose div. 但是，我只是将这些div放在.nose div后面。 Here's my code: 这是我的代码：
*, *::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>
1 个解决方案
解决方案1
1 已采纳 2017-03-23 02:39:14
In short: Set z-index on your head element. 简而言之：在头部元素上设置z-index。 Move ears out of the head element. 将耳朵移出头部元件。
Here is why. 这就是原因。
z-index has stacking contexts. z-index具有堆叠上下文。 Each of those contexts has a root element (just any html element). 每个上下文都有一个根元素（只是任何html元素）。 Now, to become a root element it must comply with any of the following rules: 现在，要成为根元素，它必须遵守以下任何规则：
- be
<html>element是<html>元素 - position other than
staticand z-index other thanautostatic和z-index以外的位置而不是auto - opacity less then 1 不透明度小于1
So the default stacking context is with the <html> element as a root. 因此，默认堆叠上下文以<html>元素作为根。
Once the element is inside a scope (in other words, child of a root element), it can only be positioned relative to the elements inside the scope. 一旦元素在范围内（换句话说，根元素的子元素），它只能相对于范围内的元素定位。
Think about it as a nested list. 将其视为嵌套列表。
Wrap here is a root element, as it has position set to relative and z-index to 1. And all of its children are now inside a stacking scope with the Wrap as a root. 这里包装是一个根元素，因为它的位置设置为relative，z-index为1.并且它的所有子节点现在位于堆叠范围内，Wrap为根。
So, like in a nested list, children of a particular element cannot appear before its root. 因此，就像在嵌套列表中一样，特定元素的子元素不能出现在它的根之前。 For example, Child2 cannot appear before the Wrap , since it is scoped inside of it. 例如， Child2不能出现在Wrap之前，因为它的范围在它内部。 But it can appear before the Child1 . 但它可以出现在Child1之前。
Now, in your case the structure is as follows: 现在，在您的情况下，结构如下：
Notice that the head is not a root, because it doesn't comply with the rules for becoming one (positioned elements must also have z-index other than auto). 请注意，头部不是根，因为它不符合成为一个的规则（定位元素也必须具有除auto之外的z-index）。 Therefore when you assign z-index of -1 to the Nose::before and ::after you get this: 因此，当你得到这个时，将z-index为-1分配给Nose :: before和::
The elements have been positioned all the way behind the Head, because they are in the same stacking scope. 这些元素一直位于Head后面，因为它们处于相同的堆叠范围内。 But they appear on top of Head::before , since when elements have the same z-index, they are stacked according to the order of appearance in html. 但它们出现在Head::before ，因为当元素具有相同的z-index时，它们根据html中的外观顺序堆叠。
Now, to prevent head children from appearing behind it, you must add z-index to it. 现在，为了防止头部孩子出现在它后面，你必须添加z-index。 This will make it a root element of new stacking scope. 这将使其成为新堆叠范围的根元素。
But this creates another problem. 但这会产生另一个问题。 Now ears are positioned on top of the head. 现在耳朵位于头顶。 This is not possible to solve with css alone, since they are inside a stacking scope of the head. 单独使用css是不可能解决的，因为它们位于头部的堆叠范围内。 And root always lies behind every of its children. 根总是落在每个孩子身后。
To solve it, you must move the ears out of the head. 要解决它，你必须将耳朵移出头部。 So, it means, you won't be able to use pseudoelements (before & after) anymore. 所以，这意味着，你将无法再使用伪元素（之前和之后）。 I suggest creating ear elements outside of the head and wrapping everything in some other element (named bear?) with position relative. 我建议在头部之外创建耳朵元素并将所有内容包装在一些其他元素（名为bear？）中，并且位置相对。 Wrapper is needed if you still want to position ears relative to the head. 如果你仍然想要相对于头部定位耳朵，则需要包装器。
The answer is mostly inspired by this article . 答案主要受本文的启发。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.