Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.
Введение
Свойство z-index широко применяется в CSS и помогает решить множество проблем в процессе верстки макета. На первый взгляд простое свойство z-index имеет свои нюансы, незнание которых приводит к беспричинным беспокойствам и вопросу: «Почему ничего не работает?». Для начала определим, что оно делает. Свойство z-index устанавливает уровень элемента, т.е. порядок наложения элементов одного на другие. Оно имитирует третье пространство: z-плоскость. Чтобы понять выше сказанное, приведу наглядный пример, автором которого является Луи Лазарис (канадский веб-разработчик). На рис. 1 изображена z-плоскость.
Самая распространенная ошибка, это незнание того, что свойство z-index работает, только если для свойства position установлены значения fixed, absolute или relative. Далее рассмотрим синтаксис:
z-index: число | auto | inheritВ качество значений могут использоваться ноль, положительные и отрицательные числа. Чем значение больше, тем выше находится элемент (или правее, если рассматривать рис. 1). Если для двух элементов свойство z-index имеет равное значение, то ниже (на заднем плане) будет расположен тот, который в коде написан выше. Для значения auto, порядок элементов устанавливается в зависимость от порядка их написания в коде.
Как располагаются элементы
Несколько пунктов, которые влияют на обычное расположение элементов, при условии не использования свойства z-index.
- Применение свойства position;
- Фон и границы элемента;
- Строчные элементы в порядке отображения.
Как применять свойство 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 по тегу CSS.
