DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for CSS child behind parent with z-index
Sabbir Sobhani
Sabbir Sobhani

Posted on • Updated on

CSS child behind parent with z-index

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

  1. If you have a situation so to make the parent element fixed, sticky or absolute 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>
Enter fullscreen mode Exit fullscreen mode

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

Done.

Follow me on Twitter sabbirsobhani

Top comments (0)

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git