Weird z-index behavior preventing mouse interaction: error or normal?

Question

Every time I try to use z-index on a web page to change the stacking order of overlapping divs, I seem to run into a problem when a div, which is forced to decrease, becomes immune to mouse events.

In my current situation, I:

<div class="leftcolumn"> <div class="leftbar"></div> <!-- a 95px wide bar on the left --> ... <h3>header</h3> <!-- a little header sitting inside the leftbar ... </div> 

By default, h3 is not displayed - it is hidden behind the left panel. If I add z-index: 5; to h3 it is not displayed yet.

So, I add z-index: -1 to the left. Now it is hidden behind the left column - but at least h3 shows.

So, I am adding z-index: -2 to the left column. Now everything looks right - but you cannot click on anything in the left column. The mouse cursor does not change from the arrow.

I get this exact behavior in both Chrome and Firefox. IE7 doesn't display the left pane at all, but at least the stuff can be clicked.

So, do I misunderstand z-index, or is there an error here in both FF and Chrome? Can z-index be used effectively for this kind of thing, or do I need to find another way?

(I can change the HTML, but the less the better.)

Answer 1

Well, after 10 seconds, I found that using only positive z-index'es makes the problem go away. Perhaps a negative z-index means that the object is below the level at which the mouse cursor lives?

Answer 2

Did you know that in order for the z-index to work correctly, you need to place your elements, even if they are just position: relative (which do not change their position, but allow the use of z-index). So you have to give the leftbar position, say 2 , and your h3 - position, say 3 . And your h3 should be upstairs.

You can use any type of position if you have one.

For reference:

#leftcolumn { position: absolute; z-index: 1; }

#leftbar { position: relative; z-index: 2; }

h3 { position: relative; z-index: 3; }

Answer 3

Although the contents of the leftcolumn are visible, the left div is now sitting on top of it, probably with a transparent background. Ideally, you would like to change the HTML so that H3 is in the left pane, but if this is not an option, you may need to apply z-index to certain items in the left column to pull them above the items in the left pane.