Не удается получить z-index для работы с этими фоновыми элементами CSS

Question

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

http://jsfiddle.net/mjmitche/AfPWE/24/

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

Answer 1

Пересекающиеся элементы должны быть на одном уровне друг с другом.Проверьте эту скрипку: http://jsfiddle.net/jmqwZ/

Я создал «другой» div на том же уровне, что и розовый.Вы можете попробовать поменять их z-индексы.

Answer 2

Это не работает, поскольку z-index элемента наследуется от его родителя. Чтобы это сработало, у вас будут "de-child" элементы:

<div id="green"></div>

<div id="black"></div> 

<div id="pink"></div>

А также z-index должна быть позиция, но у вас есть.