Как элемент может располагаться позади своего родителя, но все же перед своим дедом?

Question

У меня есть три элемента, сложенные друг в друга.Теперь я хочу, чтобы самый внутренний элемент был помещен позади его родителя, но все еще перед его прародителем.Я пробовал разные варианты настроек z-index, но безуспешно.

Код, который работает в моем понимании z-index:

<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>

За исключением того, что он не работает

Есть решение?

Answer 1

Если вы удалите позицию относительно второго деления, это будет работать

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>

пример: http://jsfiddle.net/MFULL/90/

Answer 2

Если вы имеете в виду, как:

<div id="a">
    <div id="b">
        <div id="c">
        </div>
    </div>
</div>

Тогда вы можете использовать следующий метод:

Демо: http://jsfiddle.net/ZmvKX/

#a {
    width: 300px; height: 300px; border: 1px solid black; background-color: #000;
    z-index: -1; position: absolute;
}

#b {
    width: 200px; height: 200px; border: 1px solid black; padding: 10px 10px; top: 100px; left: 100px; background-color: #ff0;
    position: relative;
}

#c {
    width: 100px; height: 100px; border: 1px solid black; padding: 10px 10px; top: -50px; left: -50px; background-color: #fff;
    position: absolute; z-index: -2;
}

Хитрость в том, чтобы правильно настроить контексты укладки.

Answer 3

Пока элементы являются частью потока страниц, родитель не может быть перед его дочерними элементами.

Вы должны будете использовать абсолютное позиционирование, чтобы вывести элементы из потока страниц, чтобы сделать возможным их размещение таким образом.