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

Question

Каждый раз, когда я пытаюсь использовать 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, но чем меньше, тем лучше.)

Answer 1

Хорошо, через 10 секунд я обнаружил, что использование только положительных z-index'ов устраняет проблему. Возможно, отрицательный z-индекс означает, что объект находится ниже уровня, который условно живет курсор мыши?

Answer 2

Знаете ли вы, что для правильной работы z-index вам необходимо расположить элементы, даже если они просто position: relative (что не меняет их положение, но позволяет использовать z-index ). Таким образом, вы сможете дать leftbar позицию, скажем, 2, а вашему h3 -, скажем, 3. И твой х3 должен быть на высоте.

Вы можете использовать любой тип позиции, если он у вас есть.

Для резюме:

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

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

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

Answer 3

Несмотря на то, что содержимое левого столбца видно, левый элемент div теперь находится поверх него, вероятно, с прозрачным фоном.В идеале вы хотели бы изменить HTML-код таким образом, чтобы H3 находился в левой панели, но если это не вариант, вам может потребоваться применить z-index к определенным элементам в левом столбце, чтобы вытянуть их над элементами в левой панели.