Большинство сайтов выглядят для нас как плоская двумерная картинка, как холст в Фигме. Но как и в Фигме, эту плоскую картинку формируют слои, которые могут накладываться и перекрывать друг друга.
Важно понимать принцип работы слоёв и их наложения в вёрстке: на базовом уровне — чтобы избегать глюков с налезающими друг на друга элементами страницы, на продвинутом уровне — чтобы верстать всякий хитрый слоёный дизайн.
Для наглядности элементы покрашены и анимированы, эти стили опущены в примерах
Если сверстать два элемента и сдвинуть один на другой, выше окажется стоящий ниже в ХТМЛ‑разметке:
Для наглядности элементы покрашены и анимированы, эти стили опущены в примерах
<div class="box-one">1</div>
<div class="box-two">2</div>
.box-two {
margin-top: -50px;
margin-left: 15px;
}
Это поведение по умолчанию, пока мы не задаём порядок наложения элементов явно. Продолжая аналогию: в Фигме новые слои будут перекрывать старые, пока мы не начнём менять порядок слоёв вручную.
Управление порядком слоёв, z‑index
В ЦСС есть свойство z-index, управляющее порядком наложения элементов. Но исторически это свойство не работает само по себе. Проще всего запомнить, когда оно работает, так:
Во‑первых, свойство z-index работает для всех дочерних элементов грид‑ и флекс‑контейнеров:
<div class="rows">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
.rows {
display: flex;
flex-direction: column;
}
.row:nth-child(1) {
z-index: 5;
}
.row:nth-child(2) {
z-index: 1;
}
.row:nth-child(3) {
z-index: 3;
}
.row:nth-child(4) {
z-index: 2;
}
Во‑вторых, z-index будет работать, если у элемента position: relative. Этот вариант подойдёт, чтобы изменить порядок наложения, не меняя вид и поведение элемента:
<div class="one"></div>
<div class="two"></div>
.one {
position: relative;
z-index: 2;
}
В‑третьих, z-index будет работать, если у элемента position: fixed / absolute / sticky. Это позволяет управлять порядком наложения разных залипашек, всплывашек, выезжашек, выпрыгивалок.
В‑четвёртых, z-index будет работать, если указано любое из перечисленных свойств: opacity, transform, mix-blend-mode, filter, will-change или -webkit-overflow-scrolling.
Группировка слоёв, stacking context
В Фигме слои можно группировать, после чего в общем порядке слоёв на холсте начинает участвовать уже группа, а слои внутри имеют собственный порядок наложения.
То же самое возможно в вёрстке — можно поместить элементы в контейнер и управлять уже его порядком наложения. Элементы внутри будут иметь свой порядок и никогда не вылезут за пределы порядка контейнера:
<div class="rows one">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
<div class="rows two">
<div class="row"></div>
<div class="row"></div>
</div>
.rows.one {
position: relative;
z-index: 2;
}
.rows.two {
position: relative;
z-index: 1;
}
Всё это поведение разработчики называют stacking context.
Важно понимать, что свойство z-index относительное и лишь управляет порядком элементов, а не задаёт их координаты по Z‑оси напрямую. Этим свойством вы не сможете визуально отдалить или приблизить элемент к читателю. Чтобы создать полноценную глубину страницы, параллакс или 3Д‑эффект, используют другие свойства и приёмы. Об этом когда‑нибудь в будущих советах.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.