Почему z-индекс не работает?

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

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

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

или

z-index:100 // on the div above

тоже не работает. Ни одна комбинация ничего подобного. Почему?

Ответы

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

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

Ответ 4

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

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

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

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

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

Элементы flex items или элементы сетки могут использовать 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/