CODEWITHSUNDEEP
htmlz-index
vondip
vondip

Reputation: 14039

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

Upvotes: 0

Views: 1628

Answers (2)

Shikiryu
Shikiryu

Reputation: 10219

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/

Upvotes: 1

Joseph Le Brech
Joseph Le Brech

Reputation: 6653

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)

Upvotes: 1

Related Questions