Question

I have three elements stacked into each other. Now I want the innermost element to be placed behind its parent but still in front of its grandparent. I tried different variations on z-index settings, but had no succcess.

The code that shoul work as my understanding of z-index is:

<div style="width: 400px; height: 400px; background-color: purple; position: relative; z-index: 1;">
    <div style="width: 200px; height: 200px; background-color: blue; position: relative; z-index: 1;">
        <div style="width: 100px; height: 100px; background-color: green; position: relative; z-index: -1;"></div>
    </div>
</div>

Except that it does not.

Any solution?

Answer 1

If you remove the position relative from the second div it will work

CSS

.div1{
  width: 400px; 
  height: 400px; 
  background-color: purple; 
  position: relative;
  z-index: 1;
}

.div2{
  width: 200px; 
  height: 200px; 
  background-color: blue;  
  z-index: 1;
}

.div3{
  width: 100px; 
  height: 100px; 
  background-color: green; 
  position: relative;
  z-index: -1;
  left:150px;
}

HTML

<div class='div1'>
    <div class='div2'>
        <div class='div3'></div>
    </div>
</div>

example: http://jsfiddle.net/MFULL/90/