z-index not working on pseudo-element
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;
}
Hassan
I've been interested in graphic design since I can remember - and I've decided to point this interest towards the Internet - medium that is evolving in crazy, fascinating and unpredictable way. Constant evolution of methods and technologies is what drives me.
Updated on June 15, 2022Comments
-
Hassan almost 2 years
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.
-
UncaughtTypeError over 6 yearsAdd
.logistic-bg .polkrys_shadow:after { content: ""; background: white; position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
, then on.logistic-bg .polkrys_shadow
declarez-index: 9;
, and on.logistic-bg div:first-child
declarez-index: 99;
-
Hassan over 6 yearsWe might be getting somewhere - gyazo.com/c9efc79f9b2c5a668fdbb0fbaee2a633
-
UncaughtTypeError over 6 yearsNow declare
position: relative;
on.logistic-bg div:first-child
-
Hassan over 6 yearsIt works! Any explanation for this? Please write a separate answer so I can upvote you to high heavens. :)
-
Jayx over 6 years@UncaughtTypeError you should probably add this as an answer - seems fixed.
-
UncaughtTypeError over 6 years@Hassan Answer officially added.
-
-
Hassan over 6 yearsThat doesn't help. I get you try to add another element on top of the stack, but the problem is not with the pen - text and elements there show as intended, along with pseudo element. The problem is with implementation on website I've provided.