Просмотров: 4 399

Свойство 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».

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

 

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

Услуга верстки посадочных страниц.

  • http://vk.com/id220436224 Илья Легашёв

    спасибо) очень помогло)