Css /僞元素::之前他的容器不工作

我試圖做一些事情，但它根本不工作。這看起來很簡單，我希望將:before添加到具有背景的元素，但是每次我都這樣做時，::before都會放在容器的前面。Css /僞元素::之前他的容器不工作

.container{ 
    position:relative; 
    z-index:1; 
    background:blue; 
    border:1 px solid white; 
    } 

    .container::before{ 
     position:absolute; 
     content:""; 
     z-index:-1; 
     top:-10px; 
     left:-10px; 
     width:calc(100% + 20px); 
     height:calc(100% + 20px); 
     background:red; 
    }

來源

2017-08-11 loximose

你在哪裏希望::之前去刪除z-index:1財產？在容器的左邊，右邊還是後面？ –

容器後面..我簡化了代碼，但之前有一個漸變我想放在它後面，這就是爲什麼他位於頂部-10px，左側-10px的容器（以及計算太） – loximose

只需從.container

body { 
 
background-color: #eee; 
 
} 
 

 
.container{ 
 
position:relative; 
 
background:blue; 
 
border:1 px solid white; 
 

 
width: 200px; 
 
height: 200px; 
 
} 
 

 
.container::before{ 
 
    position:absolute; 
 
    content:""; 
 
    z-index:-1; 
 
    top:-10px; 
 
    left:-10px; 
 
    width:calc(100% + 20px); 
 
    height:calc(100% + 20px); 
 
    background:red; 
 
}

<body> 
 

 
    <div class="container"></div> 
 

 
</body>

來源

2017-08-11 14:07:08

非常感謝:)聲音邏輯是..但如果（這是我的例子），身體有背景，你同意我的前身會落在身後，對吧？這意味着我需要另一個容器父母這個z-index高於身體的父親？ – loximose

我剛更新了我的答案。正如你所看到的，身體有一個灰色的背景:) –

對不起，我以爲我發佈了這最後一個答案yersteday，但我沒有......所以，這是一個關於z-index和堆棧情境化的完整文章，因爲它可能比它看起來更復雜：https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ 另外，不要忘了設置這個問題來解決如果它是：） –

Css /僞元素::之前他的容器不工作

回答

相關問題