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 any z-index
(it's important), set position relative
(by default though it's relative).
child: Give any positional value (absolute, sticky or fixed), and z-index
any negative integer value.
Now, the child is behind the parent element. ✅
➕
Scenario
- If you have a situation so to make the parent element
fixed
,sticky
orabsolute
then what?
Simple, since child element will not work with z-index: -1;
or behind parent, if parent is other than relative
. Just wrap the parent element with any tag and make it fixed
, sticky
or absolute
.
<div class="wrapper fixed-or-sticky-or-absolute"> 👈wrapper tag
<div class="parent relative">
<div class="child any-position-will-work z-index(-1)"></div>
</div>
</div>
Moreover, you can now give any z-index
value to the wrapper
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 Twitter sabbirsobhani