Z-index issue : Stack a child element behind a parent container

Question

I have a situation where in there are 2 children in a parent container. The first child occupies the entire content of the parent container. The other child should be below the parent container. Currently it shows up on top of the parent. I am struggling to stack the 2nd child element behind the parent container.

Is it possible to do so. If so how do I approach the solution.

Note: I cannot get rid of the z-index of the parent container as it is the modal in this case

HTML

 <div class="parent">
    <h1>Parent</h1>
      <code>position: absolute;<br/>
      z-index: 1;</code>

    <div class="outer-child">
    <br/><br/><br/><br/><br/>
        <h1>Outer Child</h1>
        <code>position: relative;<br/>
        z-index: 1;</code>
    </div>

    <div class="child">

        <h1>Child</h1>
        <code>position: absolute;<br/>
        z-index: -1;</code>
    </div>
</div>

CSS

 html {
    padding: 20px;
    font: 12px/20px Arial, sans-serif;
}

div {
    opacity: 0.7;
    position: relative;
}

.parent {
    z-index: 1;
    opacity: 1;
    position: absolute;
    top: 40px;
    left: 100px;
    width: 330px;
    border: 1px dashed #900;
    background-color: #fdd;
    padding: 40px 20px 20px;
    height: 200px;
}

.child {
    z-index: -1;
    position: absolute;
    top: 10px;
    left: 260px;
    width: 150px;
    height: 110px;
    border: 1px dashed #009;
    padding-top: 125px;
    background-color: #ddf;
    text-align: center;
}

.outer-child {
    z-index: 1;
    opacity: 0.8;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 330px;
    border: 1px dashed #900;
    background-color: #ffc;
    padding: 20px 10px 10px;
    height: 200px;
}

JSFiddle

Answer 1

Set the parent element z-index to initial

html {
    padding: 20px;
    font: 12px/20px Arial, sans-serif;
}

div {
    opacity: 0.7;
    position: relative;
}

.parent {
    z-index: initial;
    opacity: 1;
    position: absolute;
    top: 40px;
    left: 100px;
    width: 330px;
    border: 1px dashed #900;
    background-color: #fdd;
    padding: 40px 20px 20px;
    height: 200px;
}

.child {
    z-index: -1;
    position: absolute;
    top: 10px;
    left: 260px;
    width: 150px;
    height: 110px;
    border: 1px dashed #009;
    padding-top: 125px;
    background-color: #ddf;
    text-align: center;
}

https://jsfiddle.net/3269rjqh/1/

Answer 2

Once an element has a z-index, it creates new plane, so any child elements with a z-index are always going to be "above" it (in the z-plane). You can either remove the z-index from the parent, or restructure your HTML accordingly.

Answer 3

 html { padding: 20px; font: 12px/20px Arial, sans-serif; } div { opacity: 0.7; position: relative; } .parent { z-index: 1; opacity: 1; position: absolute; top: 40px; left: 100px; width: 330px; border: 1px dashed #900; background-color: #fdd; padding: 40px 20px 20px; height: 200px; } .child { z-index: -1; position: absolute; top: 10px; left: 260px; width: 150px; height: 110px; border: 1px dashed #009; padding-top: 125px; background-color: #ddf; text-align: center; } 

 <div class="parent"> <h1>Parent</h1> <code>position: absolute;<br/> z-index: 1;</code> </div> <div class="child"> <h1>Child</h1> <code>position: absolute;<br/> z-index: -1;</code> </div>