Is it possible to have a child element behind his parent element with z-index

Question

Hi,

I would like to know if it possible to have a child element behind his parent element with z-index. I would like to use the parent div as transparent color layer on top of his content.

Thanks

Answer 1

In short, no. The Child element always inherits the z-index from its parent.

Check out the article: Understanding CSS z-index.

Answer 2

Not possible, because each positioned element creates a stacking context.

Explanation 1, Explanation 2

Answer 3

You could just do it the other way and use the child as the overlay like this

HTML

<div id="stuff"><div class="overlay"></div>
    <p>
    Cras venenatis ornare tincidunt. Nam laoreet ante sed nibh pretium nec gravida turpis dapibus. Curabitur lobortis; lacus sit amet rutrum aliquet, est massa feugiat lectus, bibendum eleifend velit metus vitae dolor! Duis vulputate mi vitae quam fermentum pharetra.
    </p>
</div>

CSS

#stuff{
    position:relative;
    }

.overlay{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:#ACA;
    opacity:0.4;
    }