Если два блока оба абсолютные, какой из них будет отображаться поверх другого и почему?

Порядок наложения абсолютных элементов

Когда два элемента имеют position: absolute, браузер размещает их в одном слое, если не задан z-index. В этом случае применяется правило порядка в DOM: элемент, который находится ниже в разметке, отображается поверх предыдущего. Это связано с тем, что абсолютное позиционирование изымает элемент из потока, но не меняет его порядок в дереве документа.

Если задать z-index, то элемент с большим значением будет выше. При одинаковых значениях снова решает порядок в DOM. Однако z-index работает только для позиционированных элементов (absolute, relative, fixed, sticky) и только в пределах одного контекста наложения. Контекст наложения создаётся, например, при наличии opacity, transform, filter или z-index у родителя.

Пример

<div style="position: relative;">
  <div style="position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: red;"></div>
  <div style="position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: blue;"></div>
</div>

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

Контекст наложения

Если один из блоков находится внутри родителя с transform, то его z-index сравнивается только с элементами внутри того же контекста. Это может привести к неожиданным результатам, если не учитывать иерархию.

Итог

Для управления перекрытием абсолютных элементов используйте z-index и следите за порядком в DOM. Если элементы находятся в разных контекстах наложения, сравнивайте их по контексту, а не глобально. Это важно при создании модальных окон, тултипов и сложных интерфейсов.