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

У вас не работает z-index в css? Возможно вы просто не до конца понимаете его работу. Надеюсь, эта статья вам поможет.

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

Смотрите.

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

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

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

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

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

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

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

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

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

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

По сути всё.

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

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

Как-то так.

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