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

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

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

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

или

z-index:100 // on the div above

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

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

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

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

Если вы устанавливаете значение, отличное от значения, 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 есть отличная статья о контекстах наложения

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

Во многих случаях элемент должен быть расположен для 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/