Whenever I attempt to adjust the z-index on my webpage to rearrange the layering of overlapping divs, I always encounter an issue where the lower div becomes unresponsive to mouse events.
Currently, my setup includes:
<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>
The h3 element is initially hidden behind the leftbar. Even when applying z-index: 5; to the h3, it remains unseen.
Adding z-index: -1 to the leftbar hides it behind the leftcolumn, allowing the h3 to display.
Further setting z-index: -2 to the leftcolumn solves the visual issue, however, the elements within leftcolumn are no longer clickable as the cursor does not change.
This behavior persists in Chrome and Firefox alike. While IE7 does not show the leftbar, it retains functionality.
Is there a misunderstanding with how z-index works, or could this be a bug in both FF and Chrome? Can z-index effectively address this problem, or should an alternative method be sought?
(HTML modifications can be made, but minimal changes are preferred.)