Странное поведение z-индекса, препятствующее взаимодействию с мышью: ошибка или нормально?

Каждый раз когда я пытаюсь использовать z-index на веб-странице, чтобы изменить порядок наложения перекрывающихся div, я, кажется, сталкиваюсь с проблемой, когда div, который принудительно понижается, перестает реагировать на события мыши.

В моей текущей ситуации у меня:

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

По умолчанию h3 не отображается - это ' спрятан за левой панелью. Если я добавлю z-index: 5; на h3 он все еще не показывает.

Поэтому я добавляю z-index: -1 к левой панели. Теперь он скрыт за левым столбцом - но отображается, по крайней мере, h3.

Поэтому я добавляю z-index: -2 в левый столбец. Теперь все выглядит правильно, но вы не можете щелкнуть ни на что в левой колонке. Курсор мыши не меняется со стрелки.

Я наблюдаю точно такое поведение как в Chrome, так и в Firefox. IE7 вообще не показывает левую панель, но, по крайней мере, на нее можно нажимать.

Итак, я неправильно понимаю z-index, или здесь есть ошибка как в FF, так и в Chrome? Можно ли эффективно использовать z-index для такого рода вещей, или мне нужно найти другой способ?

(Я могу изменить HTML, но чем меньше, тем лучше. )