Почему элемент с z-index 5 может перекрывать элемент с z-index 10 в CSS

Что проверяют

Знаете ли вы про контекст наложения. z-index сравнивается только внутри одного контекста, и кандидат, который этого не знает, в реальном проекте начинает наращивать числа вместо того, чтобы искать причину.

Как отвечать

Сначала базовое: z-index работает у позиционированных элементов (relative, absolute, fixed, sticky), а также у потомков флекс- и грид-контейнеров. У обычного статичного блока он игнорируется молча.

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

<div style="position:relative; z-index:1">
  <div style="position:relative; z-index:10">окажется снизу</div>
</div>
<div style="position:relative; z-index:5">окажется сверху</div>

Контекст создаёт не только пара из позиционирования и z-index. Его создают opacity меньше единицы, transform, filter, will-change, mix-blend-mode, isolation: isolate, contain: paint, а также position: fixed сам по себе. Именно поэтому добавленная ради анимации строчка ломает раскладку слоёв.

Диагностика: пройти по предкам в инструментах разработчика и найти того, кто создал контекст, затем поднимать не сам элемент, а этот контекст, либо вынести всплывающий слой через портал на верхний уровень документа. При равных значениях выигрывает элемент, который идёт в разметке позже.

Где спотыкаются

Наращивают число: сначала девять тысяч, потом миллион. Внутри чужого контекста это не меняет ничего, зато в проекте заводится гонка магических значений, которую потом никто не распутает.

Не связывают поломку с анимацией. Свойство transform или opacity: 0.99 добавили ради плавности, а подсказка уехала под шапку. Причина и следствие лежат в разных файлах, и поиск идёт часами.

Ставят z-index статичному элементу и ждут результата. Свойство игнорируется без единого предупреждения, а человек продолжает искать проблему в порядке слоёв.