Z-индекс в перекрывающихся div

Question

У меня следующая ситуация, я не уверен, как z-index должен работать в этом случае:

<div style="z-index:0">
My Content
    <div style="z-index:-100">
       My Invisible Content
            <div style="z-index:100">
               My Visisble handle
            </div>
    </div>
</div>

Мне бы хотелось, чтобы "Моя видимая ручка" ... ну, чтобы была видна. В настоящее время это не так. Как мне показать это?

спасибо

Answer 1

Если вам действительно нужно остаться с этим html, вы можете / должны:

• позиционировать свои элементы div (невидимый -> относительный, видимый -> абсолютный).
• поместите видимый один над невидимым (visibile -> top: 0; left: 0;)
• добавьте фон к видимый один, если вы не хотите видеть, что за этим стоит;)
• добавить фиксированную ширину и высоту для них обоих (в случае, если содержимое невидимого одношире)

Результат здесь: http://www.jsfiddle.net/H7BwV/

Answer 2

Поскольку div являются вложенными, значения z-index не связаны друг с другом.

Попробуйте очень высокое значение z-index, оно может работать в некоторых браузерах, а не в других, хотя лучшеимея div, который вы хотите связать друг с другом в одном контексте (уровень вложенности)