Объяснение Z-Index: Как размещать элементы в стеке с помощью CSS

Объяснение Z-Index: Как размещать элементы в стеке с помощью CSS

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

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

Порядок укладки в стек по умолчанию

Давайте сначала рассмотрим порядок по умолчанию, в котором браузер укладывает элементы в стек, когда не применяется z-index:

Корневой элемент (элемент html)

Непозиционированные элементы в том порядке, в котором они определены

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Позиционированные элементы в том порядке, в котором они определены

Непозиционированный элемент — это элемент со значением для position по умолчанию static. Позиционированный элемент представляет собой элемент с любым другим значением position. Примерами других значений являются: absolute, relative, sticky или fixed.

Объяснение Z-Index: Как размещать элементы в стеке с помощью CSS

https://codepen.io/ivhed/pen/QrdEBB

Мы определили зеленый блок последним в документе. Тем не менее, он отображается за остальными блоками, потому что он непозиционирован.

Укладка в стек с помощью z-index

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

Объяснение Z-Index: Как размещать элементы в стеке с помощью CSS

https://codepen.io/ivhed/pen/xjqmpV

Перед синим блоком отображается оранжевый блок с более высоким значением z-index.

Контекст стеков

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Объяснение Z-Index: Как размещать элементы в стеке с помощью CSS

https://codepen.io/ivhed/pen/YLZdjx

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

Розовый блок имеет значение z-index, отличное от auto, которое формирует новый контекст стекирования. Тот факт, что он формирует контекст стекирования, влияет на то, как отображаются его дочерние элементы.

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

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

Объяснение Z-Index: Как размещать элементы в стеке с помощью CSS

https://codepen.io/ivhed/pen/erGoJE

Контексты стекирования формируются не только при применении к элементу z-index. Существует несколько других свойств, которые заставляют элементы формировать контексты стекирования. Некоторые примеры: filter, opacity и transform.

Вернемся к нашему предыдущему примеру. Синий блок снова является одноуровневым элементом для розового блока. На этот раз вместо добавления для розового прямоугольника z-index мы применим к нему фильтр.

Объяснение Z-Index: Как размещать элементы в стеке с помощью CSS

https://codepen.io/ivhed/pen/LmWMQb

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

Заключение

Используя z-index для позиционируемых элементов, мы можем изменить порядок укладки по умолчанию. При применении определенных свойств CSS элемент может формировать контекст стекирования. Значения z-index имеют смысл только в одном контексте стекирования.

Автор: Veronika Ivhed

Источник: https://medium.freecodecamp.org/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree