z-index in overlapping divs

I have the following situation, not sure how z-index is supposed to work in this case:

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

I'd like "My Visible Handle"... well, to be visible. Currently it isn't. How can I get it shown?

thank you

Because the div's are nested, the z-index values don't relate to each other.

Try a very high z-index value, it might work in some browsers and not others though so it's best having the div's you want to relate to one another in the same context (nesting level)

If you really need to stay with that html, you could/should :

• position your divs (invisible -> relative, visible -> absolute).
• put the visible one over the invisible (visibile -> top:0; left:0;)
• add a background to the visible one if you don't want to see what's behind it ;)
• add a fixed width & height for both of them (in case the content of the invisible one is wider)

Result here : http://www.jsfiddle.net/H7BwV/