z-index 不适用于伪元素 [英] z-index not working on pseudo-element

问题描述

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

我在 codepen 上写了一个概念验证代码片段，它在那里完美运行，但是当我尝试在网站上实现它时却没有.

body {背景:黑色；}.background-test {背景:白色；宽度:20%；保证金:2% 50%；高度:250px；填充:1%；位置:相对；}.background-test:before {宽度:100%；高度:100%；内容: "";背景:红色；位置:绝对；z-索引:-1；底部:-3%；左:-2%；-webkit-clip-path: 多边形(2% 4%, 100% 0, 99% 97%, 0 100%);剪辑路径:多边形(2% 4%, 100% 0, 99% 97%, 0 100%)；}

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

我已经标记了哪些元素应该有伪元素.

我正在添加与相关元素相关的 SASS 代码:

.polkrys_shadow {位置:相对；&:之前{宽度:100%；高度:100%；内容: "";背景:红色；位置:绝对；z-索引:-1；底部:-3%；左:-2%；-webkit-clip-path: 多边形(2% 4%, 100% 0, 99% 97%, 0 100%);剪辑路径:多边形(2% 4%, 100% 0, 99% 97%, 0 100%)；}

边距和内边距是在 wordpress 视觉编辑器中定义的.我建议使用开发工具检查提到的元素 - 你会看到它应该工作 - 但它没有.

解决方案

: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 {/* 添加额外的伪元素 */内容: "";背景:白色；位置:绝对；左:0；右:0；顶部:0；底部:0；}.logistic-bg .polkrys_shadow {/* 对父元素进行的调整 */z-索引:9；}.logistic-bg div:first-child {/* 对嵌套元素进行的调整 */位置:相对；/* 需要 z-index 才能应用 */z-索引:99；}

I have encountered a weird issue, while trying to implement a custom background on website I'm working on.

I've written a proof of concept code piece on codepen and it works perfectly there, but when I try to implement it on website it does not.

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/

You can see that the :after pseudo element is positioned correctly - in theory. When I try to implement this into the website I'm working on, it just doesn't show. Chrome Dev tools shows it's there, just not displaying it. It does show up when I disable the z-index on dev tools, but then it stacks on top of the parent, as it should.

I tried to look for stacking issues, but I'm at wits end and cannot find any reasonable explanation for this.

This is a Wordpress website loaded with theme, but this should not present an issue with z-index stacking, especially when I cannot find any rule regarding z-indexes there.

Page url: http://polkrys.pl/cukiernia/podklady-cukiernicze-okragle-biale/

I've marked which elements should have pseudo-elements on them.

I'm adding SASS code that relates to elements in question:

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

The margins and paddings are defined within wordpress visual composer. I suggest inspecting mentioned elements with Dev Tools - you'll see it should work - but it doesn't.

解决方案

The parent element of the :pseudo-element requires a z-index declared as well in order for the z-index of the :pseudo-element to function as intended. But doing so will stack the :pseudo-element over the parent element, concealing the background and nested content.

To rectify this, nested content should have a higher z-index declared. And an additional :pseudo-element (:after) should be declared to overlay the initial :pseudo-element (:before) with the background fill applied (e.g: "white"), to conceal the initial pseudo-element only allowing the overflow to reveal.

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

这篇关于z-index 不适用于伪元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！