0Pricing
CSS Academy · Урок

Z-index и контекст наложения

Управляйте порядком отображения элементов с помощью z-index и разберитесь в контекстах наложения.

«Z-index и контекст наложения» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Что такое z-index?

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

z-index работает только для позиционированных элементов

z-index не влияет на элементы с position: static (значение по умолчанию). Чтобы z-index применялся, необходимо задать relative, absolute, fixed или sticky.

<div class="popup">Popup (position + z-index)</div>

Порядок наложения по умолчанию

Без явно заданного z-index элементы накладываются в следующем порядке (от заднего плана к переднему):

  1. Фон корневого элемента
  2. Блочные элементы (в порядке потока)
  3. Плавающие элементы
  4. Строчные элементы
  5. Позиционированные элементы с z-index: auto или 0

Контекст наложения

Контекст наложения — это слой элементов с общей осью z. Значения z-index сравниваются только внутри одного контекста наложения. Элемент внутри контекста наложения нельзя разместить выше элементов за его пределами независимо от значения z-index.

Что создаёт контекст наложения

Новый контекст наложения создают:

  • position + z-index, отличный от auto
  • opacity меньше 1
  • применённые transform, filter или perspective
  • will-change для определённых свойств
  • isolation: isolate
  • Дочерние элементы гибкого или сеточного контейнера с z-index

Изоляция контекста наложения

Используйте isolation: isolate, чтобы намеренно создать контекст наложения без каких-либо визуальных побочных эффектов. Это полезно для компонентов интерфейса, которым необходимо изолировать собственные слои z-index.

<div class="modal-wrapper">Isolated stacking context</div>

Проблема шкалы z-index

В проектах часто возникают «войны z-index», когда разработчики соревнуются, увеличивая значения до 9999 или 99999. Решить эту проблему можно с помощью именованной шкалы z-index на основе переменных CSS:

<p>Custom properties define a z-index scale used across the app.</p>

Отрицательные значения z-index

Отрицательные значения z-index размещают элементы за фоном содержащего блока. Это можно использовать для декоративных слоёв псевдоэлементов, расположенных за содержимым.

<div class="card">Card with a decorative gradient layer behind it</div>

Отладка проблем с наложением

Если модальное окно или всплывающая подсказка оказывается за другим элементом, обычно причина заключается в контексте наложения у предка с низким значением z-index. Используйте 3D-представление в DevTools или проверьте непрозрачность, преобразование и фильтр у родительских элементов.

z-index во flex- и grid-элементах

Элементы гибкого и сеточного контейнеров могут напрямую использовать z-index без явного задания position. Браузер рассматривает их как позиционированные для целей наложения.

<div class="grid"><div class="grid-item demo-hover">1</div><div class="grid-item">2</div><div class="grid-item">3</div></div>

Фиксированные модальные окна и z-index

Модальные окна должны быть непосредственными дочерними элементами <body> (или обёртки верхнего уровня), чтобы выйти из контекстов наложения предков. Элемент HTML <dialog> изначально обрабатывает это в верхнем слое браузера.

Быстрая проверка

Два перекрывающихся элемента имеют z-index: 100, но находятся в разных родительских контекстах наложения. Что определяет, какой из них окажется сверху?

Итоги

z-index управляет наложением позиционированных элементов от переднего плана к заднему. Контексты наложения изолируют сравнение значений z-index. Всё, что создаёт контекст наложения у родителя, может ограничить значения z-index дочерних элементов. Используйте isolation: isolate для создания явных границ и переменные CSS для шкалы z-index.

Часто задаваемые вопросы

Урок «Z-index и контекст наложения» бесплатный?

Да — полный текст урока «Z-index и контекст наложения» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Z-index и контекст наложения»?

Управляйте порядком отображения элементов с помощью z-index и разберитесь в контекстах наложения. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Z-index и контекст наложения»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Статическое и относительное позиционирование
  2. Абсолютное позиционирование и содержащий блок
  3. Фиксированное и липкое позиционирование
  4. Z-index и контекст наложения
← Назад к CSS Academy