z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).w3school

Child behind Parent

parent: Not set anyz-index(it's important), set positionrelative (by default though it's relative).

child: Give any positional value(absolute, sticky or fixed), andz-index any negative integer value.

Now, the child is behind the parent element. ✅

➕

Scenario

1. If you have a situation so to make the parent elementfixed,sticky orabsolute then what?

Simple, since child element will not work withz-index: -1; or behind parent, if parent is other thanrelative. Just wrap the parent element with any tag and make itfixed,sticky orabsolute.

<divclass="wrapper fixed-or-sticky-or-absolute"> 👈wrapper tag<divclass="parent relative"><divclass="child any-position-will-work z-index(-1)"></div></div></div>

Moreover, you can now give anyz-index value to thewrapper element tag and it will not affect the child and parent.

Done.

Buy Me a Coffee 🙏:
If this article helped you a bit and you'd like to support my work, feel free to buy me a coffee:https://buymeacoffee.com/sobhani ☕️ Thanks for keeping me motivated!

Follow me on Twittersabbirsobhani