Stacking context

Stacking context — локальная «вселенная» по оси z. Потомки упорядочиваются внутри неё; они не могут нарисоваться выше siblings вне родительского context, каким бы большим ни был z-index.

Частые создатели context: positioned элемент с z-index не auto, opacity меньше 1, transform, filter, isolation: isolate, will-change для отдельных свойств, contain с paint и др.

					.modal-root {
  isolation: isolate; /* осознанный корень overlay */
  z-index: 100;
}
.sidebar {
  transform: translateZ(0); /* создаёт context — tooltips могут застрять здесь */
  z-index: 1;
}
				

На интервью: отлаживайте z-index через границы context, а не через увеличение чисел.

Типовые ошибки: z-index: 9999 по всему приложению; transform на родителе для анимации ловит dropdown и modal.

Компромисс: быстрые layering-хаки против спланированных overlay roots — корни с isolation масштабируются лучше.

Чеклист:

• Найдите, что создаёт каждый stacking context.
• Сравнивайте siblings только в одном context.
• Планируйте корни overlay и tooltip.
• Избегайте инфляции z-index.