Порядок наложения элементов. Свойство 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») поскольку они могут затруднить понимание наложение элементов.