Weird Z-index Behaviour Preventing Mouse Interactions: Bug Or Normal?

Every time I try to use z-index in a webpage to change the order of stacking overlapping divs, I seem to run into a problem where the div that is being forced lower becomes unrespo

Solution 1:

Ok, 10 seconds later I discover that using only positive z-index'es makes the problem go away. Perhaps negative z-index means the object is below the level that the mouse cursor notionally lives?

Solution 2:

Do you know that in order for z-index to work right, you need to position your elements, even if they're simply position: relative (which doesn't change their position any but allows you to use z-index). That way, you should be able to give leftbar a position of, say, 2 and your h3 a position of, say, 3. And your h3 should be on top.

You can use any position type as long as you have one.

For recap:

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

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

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

Solution 3:

Even though the leftcolumn content is visible, the leftbar div is now sitting on top of it, likely with a transparent background. Ideally you would want to modify the HTML so that the H3 resides within the leftbar, but if that is not an option, you may need to apply z-index to specific elements within the leftcolumn in order to pull them above elements in the leftbar.