Просмотров: 2 934

Свойство CSS z-index. Проблема один элемент перекрывает другой.

Работая с позиционированием элементов на веб-странице можно столкнуться с тем, что один блок может «наехать» на другой блок, перекрыть и сделать часть его невидимой.

Вот пример такой ситуации.

<div style="background:#ccc;">Блок 1</div>
<div style="background:#9cc; position:relative; left:20px; top:15px;">Блок 2</div>
<div style="background:#c9c;">Блок 3</div>

«Блок 2» перекрывает «Блок 3», т.к. он находится выше по коду.

По умолчанию, на самом верху отображаются те блоки, которые находятся выше по коду. Но, что делать если нам нужно изменить порядок их отображения?

Для решения этой проблемы в css используется специальное свойство, которое называется z-index.

z-index: целое число | auto | inherit

Значением свойства z-index является целое число. Хотя в спецификации и написано, что это число может быть отрицательным, но я советую вам пользоваться только положительными числами, т.к. в старых браузерах могут быть проблемы с отображением отрицательного z-index.

Это свойство работает только для тех элементов, которые имеют свойство CSS position в значении relative, absolute или fixed.

Давайте попробуем для примера выше поменять порядок отображения блочных элементов.

Разместим «Блок 3» поверх «Блока 2».

Для этого обоим блокам присвоим свойство position:relative, для того, чтобы свойство z-index начало работать.

<div style="background:#ccc;">Блок 1</div>
<div style="background:#9cc; position:relative; left:20px; top:15px;">Блок 2</div>
<div style="background:#c9c; position:relative; z-index:1">Блок 3</div>

Все, теперь «Блок 3» отображается поверх «Блока 2».

Довольно полезное свойство и позволяет решать множество проблем верстки.

 

Этот материал входит в соостав курса «Базовые приемы верстки веб-страниц»

К списку всех материалов курса. Доступ можно получить в группе вконтакте, в разделе «Ссылки».