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


182

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

введите описание изображения здесь

Я хочу разместить нижнее изображение (тег / карточку) под div над ним. Таким образом, вы не можете видеть острые края. Как мне это сделать?

z-index:-1 // on the image tag/card

или

z-index:100 // on the div above

тоже не работает. Ни одна из этих комбинаций не делает ничего подобного. Как придешь?

Ответы:


436

z-indexСвойство работает только на элементах с positionзначением , чем static(например position: absolute;, position: relative;или position: fixed).

Существует также position: sticky;то, что поддерживается в Firefox, имеет префикс в Safari, некоторое время работал в старых версиях Chrome под пользовательским флагом и в настоящее время рассматривается Microsoft для добавления в их браузер Edge.

Важно!
Для обычного позиционирования обязательно укажите position: relativeэлементы, для которых вы также установите z-index. В противном случае это не вступит в силу.



3
добавляя к этому ответу, Chrome и, вероятно, другие браузеры на момент написания этой статьи требуют, чтобы вы явно position: relative
указали,

staticэлементы статические и не могут передвигаться в x, y or z planes. Они не могут двигаться x plane (left or right)или y plane (top or bottom)нравится, когда мы работаем position: absolute. И при этом они не могут двигаться в z plane i.e. with z-index.
Акаш

Вам известно о каких-либо проблемах с использованием z-indexэлемента сетки?
Олдбой

60

Если вы устанавливаете значение, отличное от значения, staticно ваш элемент z-indexвсе еще не работает, возможно, установлен какой-то родительский элемент z-index.

Контексты стекирования имеют иерархию, и каждый контекст стекирования рассматривается в порядке наложения контекста стекирования родителя.

Так что со следующим html

div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; }
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }
<div id="el1" style="z-index: 5"></div>
<div id="el2" style="z-index: 3">
  <div id="el3" style="z-index: 8"></div>
</div>

независимо от того, насколько велико будет значение z-indexof el3, оно всегда будет ниже, el1поскольку его родитель имеет более низкий контекст стека. Вы можете представить порядок наложения как уровни, где порядок наложения el3фактически равен 3.8, что ниже 5 .

Если вы хотите проверить контексты стека родительских элементов, вы можете использовать это:

var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
    var styles = window.getComputedStyle(el);
    console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));

На MDN есть отличная статья о контекстах наложения


как это исправить?
С.М. Пат

3
установить правильный z-индекс родительских элементов.
Букси

люблю этот сценарий
Matoeil

31

Ваши элементы должны иметь positionатрибут. (например absolute, relative, fixed) или z-indexне будет работать.


26

Во многих случаях элемент должен быть расположен для z-indexработы.

Действительно, применение position: relativeк элементам в вопросе, скорее всего, решит проблему (но недостаточно кода, чтобы знать наверняка).

На самом деле, position: fixed, position: absoluteи position: stickyтакже позволит z-index, но эти значения также изменить расположение. С position: relativeмакетом это не мешает.

По сути, пока элемент не установлен position: static(настройка по умолчанию), он считается позиционированным и z-indexбудет работать.


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

Элементы, которые являются гибкими элементами или элементами сетки, можно использовать z-indexдаже тогда, когда positionесть static.

Из спецификации:

4,3. Flex Item Z-Ordering

Элементы Flex отображаются точно так же, как и встроенные блоки, за исключением того, что порядок документов с измененным порядком используется вместо порядка необработанных документов, а z-indexзначения autoотличаются от контекста стека, даже если он positionесть static.

5.4. Ось Z Порядок: z-indexсвойство

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

Вот демонстрация z-indexработы с не позиционированными элементами Flex: https://jsfiddle.net/m0wddwxs/


3
«Элементы, которые являются гибкими элементами или элементами сетки, могут использовать z-index, даже когда позиция статична». Да, спецификация, по сути, говорит, что нужно обрабатывать position: staticточно так же, как и position: relativeдля элементов flex и grid из-за динамической природы этих методов компоновки. Так что я бы, возможно, сказал, что дело не в том, что в CSS3 больше нет необходимости позиционировать элемент, а в том, что CSS3 обрабатывает элементы flex и grid так, как если бы они были позиционированы, независимо от этого. Хотя, возможно, всего два взгляда на одно и то же.
TylerH

@TylerH, мы должны обратить внимание на эту часть спецификации, потому что мы должны рассматривать статические так же, как относительные, только когда имеешь дело с z-index, а не вообще. Например, вы не можете сдвинуть гибкий элемент, используя left / top / bottom / right, если вы явно не указали специфику position:relative. Потомки гибких элементов с абсолютным положением не будут рассматривать гибкий элемент как содержащий их блок, поскольку гибкий элемент не позиционируется. ( jsfiddle.net/0yo7utfL/2 )
Темани Афиф

я нашел странную "ошибку" с CSS. по какой-то причине overflow-y: scrollмешает overflow-x: visibleработать ... пожалуйста, посмотрите?
старик
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.