логотип PurpleSchool

Порядок наложения элементов. Свойство z-index.

Автор

Алексей Овсянников

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

Порядок наложения элементов

  • Если свойства z-index и position явно не заданы для элементов, контекст наложения определяется порядком их размещения в исходном коде.
  • Определяя значение свойства z-index мы и тем самым изменяем порядок контекста наложения, изменяя расположение с позиционированных элементов. Эти элементы будут представлены на странице в следующем порядке:
    • корневой < html> элемент, который содержит все элементы веб-странице, а также фон и границы элементов;
    • с позиционированные элементы с отрицательным значением z-index;
    • не с позиционированные блочные элементы;
    • не с позиционированные float элементы;
    • не с позиционированные строковые элементы;
    • позиционированные элементы со значениями z-index: 0 / auo;
    • элементы с положительным значением z-index;

Cвойство z-index

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

Синтаксис

z-index: 100;
z-index: 120;
z-index: -10;
z-index: inherit;
z-index: initial;

Значения

  • auto(по умолчанию): присваивается значение 0. Если блок имеет фиксированное значение позиции или является корневым элементом, использование значения auto также создает новый контекст наложения.
  • целое число: значение определяет расположение элемента в текущем контексте наложения, а также создает новый локальный контекст. Можно использовать любые целые числа, включая отрицательные. Отрицательные значения размещают элемент под элементами с нулевым и положительным индексами.
  • initial: Устанавливает значение свойства в значение по умолчанию.
  • inherit: Наследует значение свойства от родительского элемента.

Как упорядочить z-index внутри проекта?

Перечислим несколько способов:

  1. Храните все значения z-index в одном месте, например в CSS / SCSS переменных. Тогда значениями z-index будет проще управлять.
  2. Установите шкалу z-индекса, например, используя значения, кратные 100. Это поможет проще понять, какие элементы должны располагаться поверх других.
  3. Избегайте использования произвольных значений z-индекса(таких, как «9999») поскольку они могут затруднить понимание наложение элементов.
изображение курса

HTML и CSS

Антон Ларичев
иконка часов19 часов лекций
иконка зведочки рейтинга4.9
Frontend
Mobile
HTML и CSS