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

Question

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

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

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

или

z-index:100 // on the div above

тоже не работает.Ни один не делает комбинацию ничего подобного.Как получилось?

Answer 1

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

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

Answer 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>

независимо от того, насколько велико будет установлено z-index из 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

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

Answer 3

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

Answer 4

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

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

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

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

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