Negative z-index and isolution: isolate are the best friends

Aug 20, 2025

background-color red, position relative are defined to the parent element. background-color green, position absolute, z-index -1 are defined to the child element. The child element is hidden behind the parent element. How can it put behind the parent's content?

All childs with negative z-index will be hidden by any parent to that background-color is set. But isolation: isolate stops it. Just add it to the parent and elements with negative z-index start to position from it.

The solution is to add isolation: isolate to the parent element

P.S. All free subscription will expire on September 1st. Please, consider upgrading to a paid subscription, if you wanna continue reading

If you have any problems, please contact me melnik909@ya.ru

CSS isn't magic

Discussion about this post