0

I have the following code where I'm trying to display div with class="one" above all it's child divs (so the whole element appears red). But that does not seem to be happening. How do I fix this?

https://jsfiddle.net/nordy/15heL6gf/

 <div class="one">
        <div class="two">This is two</div>
        <div class="two">This is two
            <div class="three">This is three</div>
        </div>
    </div>

CSS

.one {
    border:1px solid black;
    background:red;
    position:relative;
    z-index:5
 }

.two {
    background:green;
    position:relative;
 }

.three {
    position:relative;
}
Norman
  • 6,159
  • 23
  • 88
  • 141
  • `z-index` usually only works relative to their sibling elements. Elements that have been pulled out of the natural layout flow (for example, via `position: absolute`) are exceptions. – Ouroborus Oct 30 '20 at 01:39
  • To be clear you would like to have background of child red? And still see the written of the child? – MaxiGui Oct 30 '20 at 09:36
  • Why closing ? the duplicate is ok, but this is not the only way.... Easy way using `display:contents` https://codepen.io/Maxigui/pen/rNLdmKX (Note that will not work on IE) – MaxiGui Oct 30 '20 at 10:01

1 Answers1

0

When declaring z-index to a parent element it effects his childs also - So you can't make the parent overlap it's own content using z-index.

Try use opacity (etc) instead.

You can check this for more info about z-index with practical use cases.

A. Meshu
  • 4,053
  • 2
  • 20
  • 34