Наложение элементов в Grid

В CSS Grid несколько элементов могут занимать одни и те же ячейки сетки одновременно — это создаёт наложение без использования position: absolute, а порядок слоёв управляется через z-index.

Зачем нужно

position: absolute для наложения требует ручного расчёта позиций и нарушает нормальный поток. Grid-наложение остаётся в потоке, сохраняет связь с сеткой и не требует обёрток. Это мощный инструмент для создания сложных раскладок: карточки с подписями, hero-секции, журнальные макеты.

Где используется

  • Карточки с изображением и текстом поверх него
  • Hero-секции с фоном и контентом в одной ячейке
  • Журнальные макеты с перекрывающимися элементами
  • Декоративные элементы поверх основного контента

Базовый пример: два элемента в одной ячейке

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 300px;
}

/* Оба занимают одно место */
.image {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.caption {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  z-index: 1; /* поверх изображения */
  align-self: end; /* к нижнему краю */
  padding: 16px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
}

<div class="grid">
  <img class="image" src="photo.jpg" alt="">
  <div class="caption">Подпись к фото</div>
</div>

Полноэкранное наложение через 1 / -1

.magazine {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 150px);
}

/* Фоновое изображение на всю сетку */
.bg {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

/* Заголовок поверх в правой части */
.headline {
  grid-column: 4 / -1;
  grid-row: 2 / 4;
  z-index: 1;
  padding: 24px;
}

Управление порядком слоёв

.layer-1 { z-index: 1; } /* самый нижний из наложенных */
.layer-2 { z-index: 2; }
.layer-3 { z-index: 3; } /* поверх всех */

Grid-элементы создают новый stacking context при установке z-index, отличного от auto.

Частые ошибки

  1. z-index без позиционирования — в обычном потоке z-index не работает; в Grid он работает без position: relative, так как Grid-элементы уже участвуют в stacking context.
  2. Неожиданное перекрытие — если Grid-элементы оказываются в одной ячейке случайно (авторасположение), они перекроются; явно указывайте координаты.
  3. Потеря доступности — перекрытые элементы могут быть нажаты по ошибке; используйте pointer-events: none для декоративных слоёв.

Связанные темы

Ресурсы