Question

我在尝试在网站上实现自定义背景时遇到了一个奇怪的问题。

我已经在codepen上编写了一个概念证明代码段，但它在那里工作得很好，但是当我尝试在网站上实现它时，它却没有。

＆＃13;

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

＆＃13;

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

＆＃13;

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

你可以看到：after伪元素在理论上正确定位。当我尝试将这个实现到我正在处理的网站时，它只是没有显示。 Chrome开发工具会显示它，只是不显示它。当我在开发工具上禁用z-index时会显示它，但它会叠加在父级之上，就像它应该的那样。

我试图寻找堆叠问题，但我在智慧结束时无法找到任何合理的解释。

这是一个装有主题的Wordpress网站，但这不应该是z-index堆叠的问题，特别是当我在那里找不到任何关于z-index的规则时。

Page 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视觉作曲家中定义的。我建议使用开发工具检查所提到的元素 - 你会看到它应该工作 - 但它没有。

Answer 1

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

要解决此问题，嵌套内容应声明更高:pseudo-element。应该声明额外的z-index（:pseudo-element）以覆盖应用了背景填充的初始:after（:pseudo-element）（例如：＆＃34; white＆＃34; ），隐藏最初的:before只允许溢出显露。

pseudo-element

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

z-index无法处理伪元素

2 个答案: