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 的规则时。

第url页：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 visual composer 中定义的。我建议使用 Dev Tools 检查提到的元素 - 你会看到它应该工作 - 但它没有。

Answer 1

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

Answer 2

:pseudo-element 的父元素也需要声明 z-index，以便 :pseudo-element 的 z-index 能够按预期运行。但这样做会将 :pseudo-element 堆叠在父元素上，隐藏背景和嵌套内容。

为了纠正这个问题，嵌套内容应该有更高的 z-index 声明。并且应该声明一个附加的 :pseudo-element (:after) 以覆盖初始 :pseudo-element (:before) 并应用背景填充（例如："white"），以隐藏初始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 3

我找到了这个解决方案：

el {
transform-style: preserve-3d;
}

el:before {
transform: translateZ(-1px);
}

z-index 不适用于伪元素

z-index not working on pseudo-element

css

pseudo-element