z-index of parent greater than child

Question

I have 3 divs: #parent, child, second

I want the #parent div to be on top of #child div and #child div to be on top on #second div. How can I set the z-index or configure the divs to achieve this? Right now, the #child div is on top of both. I prefer not to change the HTML code and simply fix it with CSS.

I've checked other similar questions but none have been able to provide a solution to the problem I'm facing.

#parent, #child, #second{
    height: 50px;
}
#parent{
    background-color: grey;
    position: relative;
    z-index: 1;
    width: 500px;
}
#child{
    background-color: #216583;
    color: white;
    position: absolute;
    top: 50%;
    z-index: 0;
    width: 400px;
}
#second{
    background-color: #f76262;
    position: relative;
    z-index: -1;
    width: 300px;
}

<div id="parent">
    <div id="child">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, velit!</p>
    </div>
</div>
<div id="second"></div>

@ObsidianAge That is the exact opposite of what I'm asking. I want the parent z-index to be greater than the child and show on top of it. — Talha Munir, Jul 24 '19 at 00:23
remove z-index from parent then make the child -1 and the second div -2 — Temani Afif, Jul 24 '19 at 00:26
@TemaniAfif do you have any explanation why removing the `z-index` works while setting it to `0` (default value) doesn't work — Abdelillah Aissani, Jul 24 '19 at 00:28
@Dadboz read the duplicate link, I am adding a detailed explanation there. — Temani Afif, Jul 24 '19 at 00:29
@Dadboz and the default value is not `0` it's `auto` and here is a big difference — Temani Afif, Jul 24 '19 at 00:29
@TemaniAfif Okay, so that initially fixed the issue but now I cant select from child layer. The text is unselectable and any link I place in that div won't click. — Talha Munir, Jul 24 '19 at 07:59
add `position:relative;z-index:0` to body element and read about https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events — Temani Afif, Jul 24 '19 at 08:28

z-index of parent greater than child

0 Answers0