Z- 색인이 의사 요소에서 작동하지 않습니다.

Question

작업중인 웹 사이트에 사용자 정의 배경을 구현하는 동안 이상한 문제가 발생했습니다.

나는 codepen에 개념 증명 코드를 작성했으며 거기에서 완벽하게 작동하지만 웹 사이트에서 구현하려고하면 그렇지 않습니다.

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

당신이 볼 수

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>

그 : 의사 요소가 올바르게 배치 후 - 이론. 제가 작업하고있는 웹 사이트에 이것을 구현하려 할 때, 그냥 보이지 않습니다. Chrome 개발자 도구는 표시하지 않고 표시합니다. dev 도구에서 Z- 색인을 비활성화하면 표시되지만 부모의 맨 위에 스택됩니다.

나는 겹쳐 쌓는 문제를 찾으려고 노력했지만, 나는 끝이났다. 그리고 이것에 대한 합리적인 설명을 찾을 수 없다.

이 테마는 테마가로드 된 Wordpress 웹 사이트이지만, 특히 Z- 색인과 관련된 규칙을 찾을 수없는 경우 Z- 색인 스태킹에 문제가 없어야합니다.

페이지 URL : http://polkrys.pl/cukiernia/podklady-cukiernicze-okragle-biale/

내가 요소가 그들에 의사 요소가되어야하는 표시했습니다.

.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%); 
     } 

마진 및 패딩 워드는 비주얼 작곡가 내에 정의된다

I 문제의 소자에 관한 SASS 코드를 추가하고있다. Dev Tools를 사용하여 언급 된 요소를 검사 할 것을 제안합니다 - 을보아야합니다.이 작동해야합니다. 그러나 그렇지 않습니다.

Answer 1

:pseudo-element 부모 요소는 z-index 의도 한대로 기능하는 :pseudo-element의 z-index 위해서는 물론 선언이 필요하다. 그러나 이렇게하면 부모 요소 위에 :pseudo-element이 겹쳐져 배경과 중첩 된 콘텐츠가 숨겨집니다.

중첩 된 콘텐츠의 경우 더 높은 z-index이 선언되어야합니다. 오버플로를 허용하기 위해서만 초기 pseudo-element을 은폐하기 위해 :pseudo-element (:after)을 추가하여 배경 채우기가 적용된 초기 :pseudo-element (:before)과 오버레이되도록 선언해야합니다 (예 : "흰색").

.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%); 
}