Урок 19. Примеры: z-index и контекст наложения (stacking context)

Рабочие примеры

В каждом примере сверху — живой результат, рядом код. Примеры идут по возрастанию сложности.

1. Кто сверху? z-index у перекрытых блоков

Три позиционированных блока наезжают друг на друга. Выше тот, у кого z-index больше.

.box { position: absolute; }
.a { z-index: 1; }
.b { z-index: 3; }  /* окажется сверху */
.c { z-index: 2; }

2. Бейдж поверх изображения карточки

Карточка — position: relative, бейдж — absolute с большим z-index.

.product-card { position: relative; }

.product-badge {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
}

3. Модальное окно поверх затемнения

Overlay (затемнение) лежит на одном слое, окно — на следующем. Шкала: overlay 40, modal 50.

.page-overlay {
  position: fixed; inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.45);
}
.modal {
  position: fixed; z-index: 50;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

4. Ловушка контекста: z-index: 9999 не помогает

Здесь у левой карточки родитель имеет transform — он создал свой stacking context. Её бейдж с z-index: 9999 заперт внутри и уходит под соседнюю синюю панель с z-index: 5. Сравнивается не 9999, а контекст родителя.

/* родитель создал свой контекст наложения */
.parent { transform: translateZ(0); }

.parent .badge { z-index: 9999; } /* заперт! */
.sibling      { z-index: 5; }     /* выше */