z-index不適用於僞元素

Question

我遇到了一個奇怪的問題，同時試圖在我正在處理的網站上實現自定義背景。

我已經在codepen上寫了一個概念驗證碼的代碼片，它在那裏完美的工作，但是當我嘗試在網站上實現時，它沒有。

body { 
 
    background: black; 
 
} 
 

 
.background-test { 
 
    background: white; 
 
    width: 20%; 
 
    margin: 2% 50%; 
 
    height: 250px; 
 
    padding: 1%; 
 
    position: relative; 
 
} 
 

 
.background-test:before { 
 
    width: 100%; 
 
    height: 100%; 
 
    content: ""; 
 
    background: red; 
 
    position: absolute; 
 
    z-index: -1; 
 
    bottom: -3%; 
 
    left: -2%; 
 
    -webkit-clip-path: polygon(2% 4%, 100% 0, 99% 97%, 0 100%); 
 
    clip-path: polygon(2% 4%, 100% 0, 99% 97%, 0 100%); 
 
}

<div> 
 
    <div class="background-test">Lorem Ipsum</div> 
 
    <div></div> 
 
</div>

https://codepen.io/Hassansky/pen/eEaQxG/

你可以看到：after僞元素被正確定位 - 在理論上。當我嘗試將其實施到我正在處理的網站中時，它只是不顯示。 Chrome開發工具顯示它在那裏，只是沒有顯示它。當我禁用開發工具上的z-index時，它會顯示出來，但是它會像父應用一樣堆疊在父級之上。

我試圖尋找堆疊問題，但我很有智慧，並且無法找到任何合理的解釋。

這是一個加載主題的Wordpress網站，但這不應該帶來z-index堆棧的問題，特別是當我找不到關於z-index的任何規則時。

頁網址：http://polkrys.pl/cukiernia/podklady-cukiernicze-okragle-biale/

我已標記哪些元素應該對他們的僞元素。

我添加，其涉及元件的問題SASS代碼：

.polkrys_shadow { 
     position: relative; 
     &:before { 
      width: 100%; 
      height: 100%; 
      content: ""; 
      background: red; 
      position: absolute; 
      z-index: -1; 
      bottom: -3%; 
      left: -2%; 
      -webkit-clip-path: polygon(2% 4%, 100% 0, 99% 97%, 0 100%); 
      clip-path: polygon(2% 4%, 100% 0, 99% 97%, 0 100%); 
     } 

的邊距和補被wordpress的視覺作曲家內定義。我建議使用開發工具檢查提到的元素 - 你會發現它應該工作 - 但事實並非如此。

Answer 1

:pseudo-element所述的父元素需要z-index爲了使:pseudo-element的z-index如預期的功能聲明爲好。但是這樣做會將:pseudo-element疊加在父元素上，隱藏背景和嵌套的內容。

要糾正這種情況，嵌套的內容應該有更高的z-index聲明。並且應聲明一個額外的:pseudo-element（:after）以覆蓋初始:pseudo-element（:before）並應用背景填充（例如：「白色」），以隱藏僅允許溢出顯示的初始pseudo-element。

.logistic-bg .polkrys_shadow:after { /* Additional pseudo-element added */ 
    content: ""; 
    background: white; 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
} 

.logistic-bg .polkrys_shadow { /* Adjustments made on parent element */ 
    z-index: 9; 
} 

.logistic-bg div:first-child { /* Adjustments made on nested element */ 
    position: relative; /* required for z-index to apply */ 
    z-index: 99; 
} 

Answer 2

<div> 
    <div class="background-test">Lorem Ipsum <div style="z-index:100;color:blue;background-color:yellow;">vgghuu</div> 
</div></div> 

body { 
    background: black; 
} 

.background-test { 
    background: white; 
    width: 20%; 
    margin: 2% 50%; 
    height: 250px; 
    padding: 1%; 
    position: relative; 
    z-index: 1; 
} 

.background-test:before { 
    width: 100%; 
    height: 100%; 
    content: ""; 
    background: red; 
    position: absolute; 
    z-index: -1; 
    bottom: -3%; 
    left: -2%; 
    -webkit-clip-path: polygon(2% 4%, 100% 0, 99% 97%, 0 100%); 
    clip-path: polygon(2% 4%, 100% 0, 99% 97%, 0 100%); 
}