使用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堆疊僞元素

回答

相關問題