Причина, почему элемент с меньшим z-index может перекрывать элемент с большим, обычно связана с контекстами наложения (stacking contexts) в CSS.

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

z-index работает только внутри одного контекста наложения.
Новый контекст наложения создаётся, например, при позиционировании (position отличном от static) и задании z-index, а также при некоторых других свойствах (например, opacity меньше 1, transform, filter и др.).
Если два элемента находятся в разных контекстах наложения, то их z-index сравнивать напрямую нельзя — важен порядок контекстов в дереве DOM.

Пример:

.parent1 {
  position: relative;
  z-index: 1; /* создаёт контекст наложения */
}
.child1 {
  position: absolute;
  z-index: 10; /* внутри parent1 */
}
.parent2 {
  position: relative;
  z-index: 2; /* другой контекст наложения, выше чем parent1 */
}
.child2 {
  position: absolute;
  z-index: 1; /* внутри parent2 */
}

В этом случае .child2 перекроет .child1, несмотря на меньший z-index, потому что .parent2 имеет больший z-index и выше в стеке.

Вывод: Чтобы z-index работал как ожидается, нужно учитывать контексты наложения и структуру DOM, а не только числовые значения z-index у отдельных элементов.

Почему z-index не работает как ожидается — элемент с меньшим z-index перекрывает элемент с большим z-index?