Не работает Z-index в CSS. Концептуальное понимание

Всё работает, просто нужно понять концепцию html страницы. Постараюсь кратко.

Смотрите.

Давайте представим весь html документ, как государство, в котором действует один единственный закон. Закон порядка расположения граждан (элементов).

Закон гласит — элементы на странице располагаются в той последовательности, в которой написаны в документе. И каждый следующий элемент будет располагаться поверх предыдущего.

Вот и весь закон. Это дефолтное правило расположения элементов в html и точка.

Но, как всегда, есть граждане, которые не соблюдают закон и выбиваются из общего строя.

Виды преступлений, из-за которых граждане становятся вне закона:

• различные свойства позиционирования position:absolute/relative (кроме static),
• свойства трансформации, масштабирования, растягивания (transform),
• и даже свойства непрозрачности opacity.

В итоге, получаем шайку головорезов, для которой закон не писан. Но ими ведь тоже надо как-то управлять?

Вот для них и был придуман z-index. Для всех тех, кто выбился из общей стаи.

И если у элемента есть хотя бы одно свойство из перечисленных выше, то он автоматически попадает в отряд зэдиндексных (вне закона).

Почему я провел именно такую аналогию. Потому что во многих статьях говорится о том, что z-index работает только для явно позиционируемых элементов. Но это не совсем так. Он работает для всех тех, кто выбился из дефолтного порядка позиционирования. А выбивают их из общего порядка не только свойства явного позиционирования, но те, что я перечислил выше.

По сути всё.

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

А z-index дочернего элемента не может быть сильнее родительского z-index и работает только в рамках своего родителя. Значит нужно либо вытащить нужный элемент из-под крыла родителя (переверстать страницу), либо сделать родителя законопослушным дефолтному порядку расположению html (убрать свойства, которые делают его зэдиндексным). Тогда дочерний элемент, даже находясь в родителе, сможет бороться с другими, т.к. батька ушел из ранга зэдиндексных и не преграждает ему путь.

Как-то так.

Если что не понятно, пишите в комментарии.