Вопросы React Frontend Developer

Если оба блока абсолютные и не имеют z-index, поверх будет тот, который позже в DOM. Если заданы z-index, больший z-index перекрывает меньший. При равных z-index снова побеждает порядок в DOM. Также важно учитывать контекст наложения: z-index работает только внутри одного контекста.

Stacking context — это область в CSS, внутри которой элементы упорядочиваются по z-index относительно друг друга. Если элемент создаёт свой контекст наложения (например, через position + z-index, opacity или transform), его дочерние элементы не могут выйти за пределы этого контекста. Поэтому элемент с большим z-index внутри одного контекста может оказаться ниже элемента с меньшим z-index из другого контекста, если родительский контекст расположен ниже.

z-index apocalypse — это ситуация, когда разработчики начинают бесконечно повышать z-index, чтобы один элемент оказался поверх другого. Это приводит к хаосу: значения растут до 9999, а поведение слоёв становится непредсказуемым. Причина — непонимание stacking context: z-index работает только внутри одного контекста наложения. Решение — правильно управлять контекстами, а не гонкой чисел.