Всё работает, просто нужно понять концепцию html страницы. Постараюсь кратко.
Смотрите.
Давайте представим весь html документ, как государство, в котором действует один единственный закон. Закон порядка расположения граждан (элементов).
Закон гласит — элементы на странице располагаются в той последовательности, в которой написаны в документе. И каждый следующий элемент будет располагаться поверх предыдущего.
Вот и весь закон. Это дефолтное правило расположения элементов в html и точка.
Но, как всегда, есть граждане, которые не соблюдают закон и выбиваются из общего строя.
Виды преступлений, из-за которых граждане становятся вне закона:
- различные свойства позиционирования
position:absolute/relative
(кромеstatic
), - свойства трансформации, масштабирования, растягивания (
transform
), - и даже свойства непрозрачности
opacity
.
В итоге, получаем шайку головорезов, для которой закон не писан. Но ими ведь тоже надо как-то управлять?
Вот для них и был придуман z-index
. Для всех тех, кто выбился из общей стаи.
И если у элемента есть хотя бы одно свойство из перечисленных выше, то он автоматически попадает в отряд зэдиндексных (вне закона).
Почему я провел именно такую аналогию. Потому что во многих статьях говорится о том, что z-index
работает только для явно позиционируемых элементов. Но это не совсем так. Он работает для всех тех, кто выбился из дефолтного порядка позиционирования. А выбивают их из общего порядка не только свойства явного позиционирования, но те, что я перечислил выше.
По сути всё.
Если всё равно не получается вывести элемент поверх остальных, то проверьте вложенность. Возможно его ограничивает родительский зэдиндексный элемент.
А z-index
дочернего элемента не может быть сильнее родительского z-index
и работает только в рамках своего родителя. Значит нужно либо вытащить нужный элемент из-под крыла родителя (переверстать страницу), либо сделать родителя законопослушным дефолтному порядку расположению html (убрать свойства, которые делают его зэдиндексным). Тогда дочерний элемент, даже находясь в родителе, сможет бороться с другими, т.к. батька ушел из ранга зэдиндексных и не преграждает ему путь.
Как-то так.
Если что не понятно, пишите в комментарии.