Bacground blur problem
I noticed that one element with a blur background overlaps the other one ignoring the z-index, how can I solve this problem?
12 Replies
We can't do anything without live code
Make a CodePen
The problem is not in the code, I checked, if I change the bacground backdrop filter footer property to any color, then the block works as it should, the nuance is that the header menu uses the same property and when it hits the footer, it overlaps it without looking on z-index
We can't do anything without live code
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Sorry, I recovered the password from codepen https://codepen.io/Mister-Eighth/pen/zYJoLmw
where the overlapping
The owner of this Pen needs to verify their email address to enable Full Page View.please do, browser devtools are easier to use in full page view for starters avoid
*{padding: 0;margin: 0;border: 0;} ot doesn't pay out in the long run esp. with images or svg; you end up re-adding margins and paddings which makes things harder to manageThe problem is that when you open the mobile menu, it goes under the footer and not above
But if you remove blur from the background of one, then everything is fine, but when the menu and the footer have blur in the background, it does not work correctly
the other one ignoring the z-indexyour SVGs are part of header and are "z-indexed" withing this element. A z-index can't escape it's parent (layering group/stacking context). You need to change the z-index for header to sit above footer as a whole.
header { z-index: 10 }
filter and backdrop-filter create new stacking contexts (had to learn this the hard way, too)
so your position go down the drain for their child elements and z order changes because now something else became the "relative" parent your positioned content aligns to.Thank you