143. Свойство z-index для определения уровня элемента

Введение

Свойство z-index широко применяется в CSS и помогает решить множество проблем в процессе верстки макета. На первый взгляд простое свойство z-index имеет свои нюансы, незнание которых приводит к беспричинным беспокойствам и вопросу: «Почему ничего не работает?». Для начала определим, что оно делает. Свойство z-index устанавливает уровень элемента, т.е. порядок наложения элементов одного на другие. Оно имитирует третье пространство: z-плоскость. Чтобы понять выше сказанное, приведу наглядный пример, автором которого является Луи Лазарис (канадский веб-разработчик). На рис. 1 изображена z-плоскость.

Рис. 1. Третье пространство в CSS

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

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

В качество значений могут использоваться ноль, положительные и отрицательные числа. Чем значение больше, тем выше находится элемент (или правее, если рассматривать рис. 1). Если для двух элементов свойство z-index имеет равное значение, то ниже (на заднем плане) будет расположен тот, который в коде написан выше. Для значения auto, порядок элементов устанавливается в зависимость от порядка их написания в коде.

Как располагаются элементы

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

1. Применение свойства position;
2. Фон и границы элемента;
3. Строчные элементы в порядке отображения.

Как применять свойство z-index

Рассмотрим следующий HTML код:

<div class = "green"></div>
<div class = "red"></div>       

И CSS код:

.red {
    width: 200px;
    height: 200px;
    background: red;
    position: relative;
}

.green {
    width: 100px;
    height: 100px;
    background: green;
    position: relative;
    margin: 0 0 -150px 50px;
}       

Необходимо обратит внимание в HTML коде на то, что зеленый квадрат записан раньше, чем красный. В CSS коде на то, что для обоих блоков заданы свойства position: relative. Следовательно, элементы расположатся в естественном порядке, и красный блок перекроет зеленый. Чтобы зеленый блок оказался сверху, необходимо немного изменить CSS код, добавив одну строчку:

.green {
    width: 100px;
    height: 100px;
    background: green;
    position: relative;
    margin: 0 0 -150px 50px;
    z-index: 1;
}       

В данном случае z-index приведен для примера, чтобы понять, как он работает. Намного проще было бы убрать position: relative у красного блока, чтобы добиться того же результата.

Похожие уроки Codebra

1. Добейтесь того, чтобы красный блок был поверх зеленого. Используйте свойство z-index. Для position используйте значение relative.

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.