Почему z index не работает

Почему не работает z-index

z-index устанавливает порядок отображения элементов на странице.

Почему может не работать?

1. Не задано position relative absolute или fixed
2. z-index дочернего элемента не может превышать родительский. Т.е. если родитель z-index: 10 а дочерний элемент z-idex 500 то дочерний будет показываться не выше уровня 10.

z — index

Если сложить элементы друг на друга, то какой из них будет сверху?

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 28 августа 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Обычно элементы на странице располагаются только в двух измерениях — x (горизонталь) и y (вертикаль). Но в отдельных случаях, когда позиционирование элементов отличается от статичного, появляется третье измерение z, отвечающее за глубину.

Свойство z — index позволяет управлять порядком наложения элементов друг на друга.

Пример

Скопировать ссылку «Пример» Скопировано

Возьмём самую частую ситуацию, где пригождается z — index — наложение полупрозрачной вуали поверх блока с фоном и текстом.

У нас будет разметка для шапки сайта:

   
Шапка сайта с классным заголовком  header> h1>Шапка сайта с классным заголовкомh1> header>    Скопировать Скопировано Не удалось скопировать   

Для header мы зададим фоновое изображение и псевдоэлемент : : after с полупрозрачной вуалью, чтобы затемнить фон и чтобы текст лучше читался.

 header  position: relative; background: url("landscape.jpg") no-repeat center / cover;> header::after  content: ""; position: absolute; inset: 0; /* Полупрозрачный фиолетовый */ background-color: rgb(125 20 204 / 0.5);> header  position: relative; background: url("landscape.jpg") no-repeat center / cover; > header::after  content: ""; position: absolute; inset: 0; /* Полупрозрачный фиолетовый */ background-color: rgb(125 20 204 / 0.5); >    Скопировать Скопировано Не удалось скопировать   

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

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

Добавим пару свойств. Отрицательный z — index опустит вуаль ниже текста:

 header  z-index: 0;> header:after  z-index: -1;> header  z-index: 0; > header:after  z-index: -1; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Значением свойства z — index может быть отрицательное или положительное целое число. Значение по умолчанию — auto .

 .selector  z-index: auto; z-index: 0; z-index: -1; z-index: 1; z-index: 9999999; z-index: -999999;> .selector  z-index: auto; z-index: 0; z-index: -1; z-index: 1; z-index: 9999999; z-index: -999999; >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Браузер выстраивает блоки страницы не только по вертикали и горизонтали, но и по глубине. Это встроенный механизм обработки документа. Чем ниже блок в разметке, тем выше он в стопке. Управлять порядком наложения блоков мы как раз и можем при помощи z — index .

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� z — index срабатывает для элементов с позиционированием (свойство position ), отличающимся от статичного (значения relative , absolute , fixed , sticky ).

�� Исключение из правил: z — index работает с элементами, у которых значение свойства opacity меньше 1. Например, трюк с opacity : 0 . 999 почти не повлияет на внешний вид, но позволит использовать z — index без изменения позиционирования элемента.

�� z — index также срабатывает у флекс и грид-элементов и везде, где создаётся контекст наложения.

�� Если z — index не указан, то блоки накладываются друг на друга в том порядке, в котором указаны в разметке. Чем ниже в разметке, тем выше в стопке. А если указан, то стопка блоков формируется согласно значению этого свойства.

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Часто вижу такие записи z — index : 99999 . Видимо, это нужно чтобы совершенно точно блок был поверх всего. Но обычно это избыточно и может привести к неожиданным последствиям в процессе поддержки сайта. Я обычно проставляю значения -1, 0 и 1. А если нужно что-то большее, то значения 10 будет вполне достаточно.

Z-index: наслаивание элементов

Позиционированные элементы можно наслаивать друг на друга при помощи CSS-свойства z-index , тем самым имитируя третье измерение (ось Z, которая перпендикулярна экрану). Эффект можно сравнить со слоями в программе Adobe Photoshop — вы можете определять, какой элемент будет располагаться выше, а какой — ниже. Давайте подробнее разберем принцип работы z-index.

Как работает свойство z-index

Свойство z-index имеет влияние лишь на позиционированные элементы, т. е. такие, для которых установлено свойство position со значением absolute , relative либо fixed . Влияние свойства z-index распространяется как на сам элемент, так и на его дочерние элементы, т. е. поднимая родительский элемент выше по оси Z, вы поднимаете и его дочерние элементы.

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

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

Значения z-index

Свойство z-index принимает числовые значения — подходят целые числа (положительные, отрицательные, ноль). Чем больше число, тем выше находится элемент по оси Z. При равных значениях z-index элементы накладываются в порядке следования в HTML.

Значением свойства z-index по умолчанию является auto .

Z-index и контекст наложения

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

Контекст наложения (англ. stacking context) — это концепция трехмерного размещения HTML-элементов по оси Z, расположенной перпендикулярно экрану. Контекст наложения может быть сформирован любым элементом, который соответствует хотя бы одному из следующих условий:

• Элемент является корневым, т. е. существует в корневом контексте наложения. Любой элемент веб-страницы является таковым, если только он не присутствует в локальном контексте наложения (в том, который создается любым из способов ниже).
• Абсолютно позиционированный (position: absolute) либо относительно позиционированный (position: relative) элемент с любым значением z-index , кроме auto .
• Элемент со свойством position: fixed и любым значением z-index .
• Элемент со свойством display: flex либо display: inline-flex и любым значением z-index , кроме auto .
• Элемент со свойством opacity и значением менее 1 .
• Элемент с любым значением свойства transform , кроме none .
• Элемент с любым значением свойства mix-blend-mode , кроме normal .
• Элемент с любым значением свойства filter , кроме none .

Итак, если соблюдать один из вышеперечисленных пунктов (применить к элементу позиционирование и z-index либо свойство opacity со значением меньше единицы и т. п.), то формируется новый контекст наложения. Внутри контекста наложения дочерние элементы можно перемещать по оси Z в соответствии с обычными правилами.

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

Один контекст наложения является полностью независимым от соседнего контекста. Это означает, что вы не можете, к примеру, наложить дочерний элемент А из одного контекста поверх дочернего элемента Б из другого контекста, если родитель элемента А находится ниже родителя элемента Б (подразумевается, что эти родители являются создателями разных контекстов).

Ниже показан пример того, как родительский элемент .d1 создает новый контекст наложения при добавлении к нему свойства opacity: 0.99 , после чего дочерний элемент .s1 вновь становится нижним слоем, несмотря на свой z-index :

Это происходит потому, что теперь свойство z-index элемента .s1 работает в пределах контекста наложения своего родителя .d1 , тогда как другие два блока пока имеют корневой контекст наложения. Каким же образом снова разместить фиолетовый блок выше других, учитывая свойство прозрачности? Для этого необходимо позиционировать все блоки , после чего можно будет установить для них нужный порядок через z-index :

В завершение

В начале урока мы сравнили принцип работы z-index со слоями в Adobe Photoshop. После того, как вы узнали о контекстах наложения, имеет смысл вспомнить и о группах слоев в Фотошопе. Представьте себе, что элемент со свойством z-index — это слой, а контекст наложения — это группа слоев. Вы можете как угодно изменять порядок наложения слоев в пределах группы. Также вы можете менять порядок наложения самих групп. Однако вы не можете наложить определенный слой из нижней группы на слои верхней группы — разве что переместить наверх всю нижнюю группу либо извлечь нужный слой из этой группы.

В примитивном варианте свойство z-index работает просто: чем больше значение, тем выше находится элемент (слой). Но стоит только столкнуться с разными контекстами наложения (группами), как всё становится намного сложнее, и начинает казаться, что z-index не работает. Рекомендуем дополнительно попрактиковаться в данной теме: создайте различные контексты наложения, используя список выше, и понаблюдайте за тем, как ведут себя элементы с z-index в этих контекстах. А в качестве удобной ассоциации вспоминайте слои и группы Adobe Photoshop.

z-index

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

Интерактивный пример

Для позиционированного элемента (т.е. если у него задано свойство position со значением, отличающимся от static ) свойство z-index отвечает за:

1. Порядок наложения в текущем контексте наложения.
2. Возможность создания локального контекста наложения.

Синтаксис

/* Ключевые слова */ z-index: auto; /* Значения типа */ z-index: 0; z-index: 3; z-index: 289; z-index: -1; /* Отрицательные значения понижают приоритет */ /* Глобальные значения */ z-index: inherit; z-index: initial; z-index: revert; z-index: revert-layer; z-index: unset; 

Значением свойства z-index может быть либо auto , либо целое число ( ).

Значения

Элемент не будет создавать нового локального контекста наложения. Порядок наложения блока в текущим контексте наложения будет равен 0 .

Формальное определение

Начальное значение	auto
Применяется к	позиционированные элементы
Наследуется	нет
Обработка значения	как указано
Animation type	целое число
Создаёт контекст наложения	да

Формальный синтаксис

z-index =
auto | (en-US)
| (en-US)
inherit

Примеры

Визуальное наложение элементов

HTML

div class="wrapper"> div class="dashed-box">Пунктирный блокdiv> div class="gold-box">Блок золотого цветаdiv> div class="green-box">Зелёный блокdiv> div> 

CSS

.wrapper  position: relative; > .dashed-box  position: relative; z-index: 1; border: dashed; height: 8em; margin-bottom: 1em; margin-top: 2em; > .gold-box  position: absolute; z-index: 3; /* помещаем .gold-box поверх .green-box и .dashed-box */ background: gold; width: 80%; left: 60px; top: 3em; > .green-box  position: absolute; z-index: 2; /* помещаем .green-box поверх .dashed-box */ background: lightgreen; width: 20%; left: 65%; top: -25px; height: 7em; opacity: 0.9; > 

Результат

Спецификации

Specification
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # z-index

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

• CSS-свойство position
• Понимание CSS z-index

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.