🧩 Трюк с z-index, о котором часто забывают

Если у вас не работает z-index — причина может быть не в его значении, а в контексте наложения (stacking context).

❗️Вот что его создаёт (неочевидное):

* position: fixed | absolute | relative + z-index ≠ auto
* transform, filter, perspective, opacity < 1
* will-change, mix-blend-mode, contain: layout и другие

📦 Пример:

.parent {
  transform: translateZ(0); /* создаёт stacking context */
  z-index: 10;
}

.child {
  position: absolute;
  z-index: 999; /* но не выйдет за пределы .parent */
}

Frontend разработчик

🧩 Трюк с z-index, о котором часто забывают

Если у вас не работает z-index — причина может быть не в его значении, а в контексте наложения (stacking context).

❗️Вот что его создаёт (неочевидное):

* position: fixed | absolute | relative + z-index ≠ auto
* transform, filter, perspective, opacity < 1
* will-change, mix-blend-mode, contain: layout и другие

📦 Пример:

.parent {
  transform: translateZ(0); /* создаёт stacking context */
  z-index: 10;
}

.child {
  position: absolute;
  z-index: 999; /* но не выйдет за пределы .parent */
}

🧠 Вывод: z-index работает только внутри текущего контекста наложения. Чтобы перекрыть что-то выше — нужно изменить контекст.

📚 Подробнее: https://developer.mozilla.org/ru/docs/Web/CSS/CSS_positioned_layout/Stacking_context

👉 @frontend_1

hottg.com/frontend_1/3972

1.9K viewsMay 7 at 13:20