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

Stacking context — это изолированная группа элементов, внутри которой происходит упорядочивание по оси Z (глубине). Каждый stacking context имеет свой собственный локальный порядок наложения.

Основные моменты:

Новый stacking context создаётся, например, при наличии позиционирования (position: relative/absolute/fixed) и z-index, opacity меньше 1, transform, filter и других CSS-свойств.
Элементы внутри одного stacking context упорядочиваются по z-index (числовому значению). Чем выше z-index, тем выше элемент в стеке.
Если у элементов разные stacking context, то порядок определяется вложенностью и порядком создания этих контекстов.

Пример:

.parent {
  position: relative;
  z-index: 1; /* создаёт stacking context */
}
.child1 {
  position: absolute;
  z-index: 10;
}
.child2 {
  position: absolute;
  z-index: 5;
}

Здесь .child1 будет выше .child2 внутри .parent. Но если есть другой stacking context с более высоким уровнем, он может перекрыть эти элементы вне зависимости от их z-index.

Таким образом, для управления порядком отрисовки важно понимать, где создаются stacking context и как z-index влияет внутри них.

Как определяется порядок отрисовки элементов, когда они перекрывают друг друга (z-index, stacking context)?