CSS - Z-Index: Maстерство分层元素的艺木

Здравствуйте, будущие волшебники веб-дизайна! Сегодня мы погрузимся в один из самых магических свойств CSS: z-index. Это как суперспособность, которая позволяет вам контролировать, какие элементы appear над другими. Волнующе, правда? Давайте начнем это путешествие вместе!

Что такое Z-Index?

Прежде чем мы углубимся в детали, давайте поймем, что такое z-index. Представьте, что вы раскладываете стопку бумаг на вашем столе. Z-index какждый выбор, какая бумага идет сверху. В веб-дизайне он помогает нам контролировать порядок стекающих элементов, которые перекрывают друг друга.

Краткий урок истории

В те давние времена веб-дизайна, создание многослойных макетов было кошмаром. Мы были вынуждены использовать неуклюжие таблицы или обращаться к фреймам (ую!). Затем появился z-index, и внезапно мы могли создавать сложные, перекрывающиеся дизайны с легкостью. Это было как discovery secret passage в видеоигре!

Possible Values

Теперь давайте посмотрим на различные значения, которые может принимать z-index:

Значение	Описание
auto	Значение по умолчанию. Элементы располагаются в соответствии с их порядком в HTML
number	Может быть положительным или отрицательным. Больше числа appear сверху меньше чисел
initial	Устанавливает z-index в значение по умолчанию
inherit	Наследует значение z-index от родительского элемента

Применяется к

Z-index применяется к позиционированным элементам (position: relative, absolute, fixed или sticky). Он не работает на статических элементах, которые являются позиционированием по умолчанию.

Синтаксис DOM

Вот как вы можете установить z-index в вашем HTML:

<div style="z-index: 1;">Я сверху!</div>
<div style="z-index: 0;">Я снизу!</div>

Но помните, обычно лучше держать ваши стили в отдельном файле CSS. Давайте посмотрим, как это выглядит:

.on-top {
z-index: 1;
}
.below {
z-index: 0;
}

<div class="on-top">Я сверху!</div>
<div class="below">Я снизу!</div>

CSS z-index - значение auto

Когда вы не указываете z-index или устанавливаете его в 'auto', элементы стекаются в порядке, в котором они appear в HTML. Давайте посмотрим пример:

<div class="box red">Красный ящик</div>
<div class="box blue">Синий ящик</div>
<div class="box green">Зеленый ящик</div>

.box {
width: 100px;
height: 100px;
position: absolute;
}
.red {
background-color: red;
left: 0;
top: 0;
}
.blue {
background-color: blue;
left: 50px;
top: 50px;
}
.green {
background-color: green;
left: 100px;
top: 100px;
}

В этом случае зеленый ящик будет сверху, затем синий, затем красный. Это как если бы они играли в прыжки!

CSS z-index - с положительным целым числом

Теперь давайте немного изменим ситуацию. Мы можем использовать положительные целые числа для явного управления порядком стека:

.red {
background-color: red;
left: 0;
top: 0;
z-index: 3;
}
.blue {
background-color: blue;
left: 50px;
top: 50px;
z-index: 2;
}
.green {
background-color: green;
left: 100px;
top: 100px;
z-index: 1;
}

С этими значениями z-index, красный будет сверху, затем синий, затем зеленый. Это как если бы мы дали им ВИП-пропуска в эксклюзивный клуб, с красным как самым важным гостем!

CSS z-index - с отрицательным целым числом

Отрицательные значения z-index такие как отправка элементов в подвал. Они будут appear за элементами с положительным или kein z-index:

.background {
background-color: yellow;
z-index: -1;
}
.content {
z-index: 0;
}

Здесь желтый фон всегда будет позади контента. Это как если бы вы установили задник для спектакля!

CSS z-index - с позиционированием sticky

Позиционирование sticky как Giving element permission to leave its normal flow, but only under certain conditions. Z-index также работает с sticky позиционированием:

.sticky-header {
position: sticky;
top: 0;
z-index: 100;
}

Этот заголовок будет прилипать к вершине области просмотра при прокрутке, и он останется сверху другого контента благодаря своему высокому z-index. Это как верный друг, который всегда имеет вашу спину!

CSS z-index - с固定ной позицией

Фиксированное позиционирование похоже на абсолютное, но оно всегдаrelative к области просмотра. Z-indexочень полезен здесь:

.modal {
position: fixed;
z-index: 1000;
}
.overlay {
position: fixed;
z-index: 999;
}

Это обеспечивает, чтобы ваш modal dialog всегда appear сверху overlay. Это как сделать sure, что звезда шоу всегда в центре внимания!

CSS z-index - с статической позицией

Помните, когда я говорил, что z-index не работает с статическим позиционированием? Вот что происходит:

.static-element {
position: static;
z-index: 999; /* Это не зробитничего */
}

Это как пытаться использовать заклинание в мире маглов - это просто не работает!

CSS z-index - с относительной позицией

Относительное позиционирование это где z-index really shines. Оно позволяет вам создавать сложные макеты, не изменяя поток документа:

.parent {
position: relative;
}
.child1 {
position: relative;
z-index: 2;
}
.child2 {
position: relative;
z-index: 1;
}

Здесь child1 будет appear сверху child2, даже если child2 comes later в HTML. Это как давать вашим элементам суперсилы, чтобы violate gravity!

И вот вы и есть,folks! Вы только что повысили свои навыки CSS с силой z-index. Помните, с великой силой приходит великая ответственность. Используйте z-index мудро, и ваши макеты будут вам благодарны. Счастливого кодирования, и да будет с вами z-index!

Credits: Image by storyset