Энциклопедия CSS: z-index
CSS-свойство z-index
отвечает за управление слоями элементов на веб-странице. Оно определяет порядок наложения элементов друг на друга, позволяя контролировать их видимость в трёхмерном пространстве браузера.
В этой статье мы подробно разберём, как работает z-index
, как правильно его использовать и какие ошибки могут возникнуть при его применении.
Как работает z-index
Свойство z-index
применяется к элементам с позиционированием (position: relative
, absolute
, fixed
или sticky
). Оно определяет положение элемента на оси Z (перпендикулярной экрану). Чем выше значение z-index
, тем выше располагается элемент относительно других элементов.
Основные правила работы z-index
:
- По умолчанию все элементы находятся на одном уровне (z-index: 0).
- Элементы с большим
z-index
перекрывают элементы с меньшим значением. z-index
работает только для элементов сposition
отличным отstatic
.- Элементы внутри родительского контейнера учитывают
z-index
родителя.
Значения z-index
z-index
может принимать различные значения:
- Автоматическое значение (
auto
) – элемент наследует порядок слоёв от родительского контейнера. - Числовые значения – положительные и отрицательные числа (например,
z-index: 10
илиz-index: -1
). - Наследуемые значения – если родитель имеет
z-index
, дочерние элементы могут быть ограничены его областью.
Пример базового использования z-index
:
.box1 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background: red;
z-index: 1;
}
.box2 {
position: absolute;
top: 70px;
left: 70px;
width: 100px;
height: 100px;
background: blue;
z-index: 2;
}
В данном примере .box2
окажется выше .box1
, так как его z-index
больше.
Контекст наложения (Stacking Context
)
Важное понятие, связанное с z-index
, – контекст наложения. Это область, внутри которой дочерние элементы упорядочиваются независимо от внешних элементов.
Контекст наложения создаётся, если:
- Элемент имеет
z-index
, отличный отauto
, иposition
неstatic
. - Элемент имеет
opacity
менее 1. - Используется
filter
,transform
,perspective
,clip-path
и другие свойства. display: flex
илиgrid
с установленнымz-index
.
Пример создания нового контекста наложения:
.parent {
position: relative;
z-index: 10; /* создаёт новый контекст наложения */
}
.child {
position: absolute;
z-index: 5; /* z-index будет отсчитываться относительно .parent, а не всей страницы */
}
Здесь .child
не сможет перекрыть элементы, находящиеся вне .parent
, даже если у него большее значение z-index
.
Ошибки и распространённые проблемы
1. z-index
не работает
Если z-index
не влияет на порядок слоёв, проверьте:
- У элемента
position
установлен вrelative
,absolute
,fixed
илиsticky
. - У родительского контейнера нет контекста наложения.
- У других элементов нет
z-index
, создающего новый контекст наложения.
2. Элемент не перекрывает другие элементы
- Проверьте, не ограничен ли он родительским
overflow: hidden
. - Убедитесь, что
z-index
применяется правильно в рамках контекста наложения.
3. z-index
внутри flexbox
- Flex-контейнер с
display: flex
может создавать контекст наложения. Используйтеposition: relative
иz-index
для корректного управления слоями.
Заключение
z-index
– мощное CSS-свойство, которое позволяет управлять слоями на веб-странице. Однако для его правильного использования важно понимать концепцию контекста наложения и особенности его работы. Следуя описанным принципам, вы сможете эффективно применять z-index
для создания сложных интерфейсов и улучшения пользовательского опыта.