⑥Определение контекста наложения: свойство z-index
Продолжим изучение темы CSS - позиционирование. Если пропустили прошлые статьи, то вот ссылки на них:
- ①Содержащий блок
- ②Выбор схемы позиционирования: свойство position
- ③Смещение блока: свойства top, right, bottom, left
- ④Обтекание: свойство float
- ⑤Управление потоком рядом с плавающими элементами: свойство clear
Схемы позиционирования
Содержание:
1. Содержащий блок
2. Выбор схемы позиционирования: свойство position
3. Смещение блока: свойства top, right, bottom, left
4. Обтекание: свойство float
5. Управление потоком рядом с плавающими элементами: свойство clear
6. Определение контекста наложения: свойство z-index
6.1. Контекст наложения
6. Определение контекста наложения: свойство z-index
В CSS каждый блок имеет позицию в трех измерениях. В дополнение к горизонтальному и вертикальному положению, блоки выкладываются вдоль оси Z друг над другом. Положение вдоль оси Z особенно важно, когда блоки визуально накладываются друг на друга.
Порядок, в котором дерево документа отрисовывается на экране, описывается с помощью контекста наложения. Каждый блок принадлежит одному контексту наложения. Каждый блок в данном контексте наложения имеет целочисленный уровень, который является его положением на оси Z относительно других блоков в том же контексте наложения.
Блоки с более высокими уровнями всегда отображаются перед блоками с более низкими уровнями, а блоки с одинаковым уровнем располагаются снизу вверх в соответствии с порядком следования элементов в исходном документе. Блок элемента имеет ту же позицию, что и блок его родителя, если только ему не присвоен другой уровень свойством z-index.
Свойство z-index позволяет изменить порядок наложения позиционированных элементов в случае, когда они накладываются друг на друга.
Свойство не наследуется.
z-index
Значение:
- auto - Вычисляется в 0. Если для блока задано position: fixed; или это корневой элемент, значение auto также устанавливает новый контекст наложения. Значение по умолчанию.
- целое число - Определяет положение блока в текущем контексте наложения. Также устанавливает новый локальный контекст наложения. Можно использовать любое целое число, включая отрицательные числа. Отрицательные значения помещают элемент вглубь экрана.
- inherit - Наследует значение свойства от родительского элемента.
- initial - Устанавливает значение свойства в значение по умолчанию.
Синтаксис
CSS
z-index: auto; z-index: 0; z-index: 5; z-index: 999; z-index: -1; z-index: inherit; z-index: initial;
6.1. Контекст наложения
Если для элементов свойства z-index и position не заданы явно, контекст наложения равен порядку их расположения в исходном коде и браузер отображает элементы на странице в следующем порядке:
- Корневой элемент <html>, который содержит все элементы веб-странице.
- Блочные элементы, не плавающие и не позиционированные.
- Плавающие float не позиционированные элементы в порядке их расположения в исходном коде.
- Строковые не позиционированные элементы (текст, изображения).
- Позиционированные position элементы в порядке их следования в исходном коде. Последний из них будет расположен на переднем плане.
Свойство z-index создает новый контекст наложения. Оно позволяет изменить порядок наложения позиционированных элементов. Элементы будут отображаться на странице в следующем порядке (если для них не заданы свойства, влияющие на контекст наложения — opacity, filter, transform):
- Корневой элемент <html>, который содержит все элементы веб-странице.
- Позиционированные элементы с отрицательным значением z-index.
- Блочные элементы, не плавающие и не позиционированные.
- Плавающие float не позиционированные элементы в порядке их расположения в исходном коде.
- Строковые не позиционированные элементы (текст, изображения).
- Позиционированные элементы со значениями z-index: 0; и z-index: auto;.
Источник ↗