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

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

enter image description here

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

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

или

z-index:100 // on the div above

не работает. Как и сочетание чего-либо подобного. Почему?

5 ответов


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

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


ваши элементы должны иметь атрибут position. (например, абсолютный, относительный, фиксированный) или z-индекс не будет работать


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

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

так со следующим 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 of el3 будет установлен, он будет всегда быть под el1 потому что это родитель имеет более низкий контекст укладки. Вы можете представить порядок укладки как уровни, где порядок укладки el3 на самом деле 3.8 что ниже, чем 5.

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

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

есть отличная статья о штабелировании контекстов на MDN


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

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

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

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


многие ответы " почему z-индекс не работает?" вопросы утверждать, что z-index только работы на расположенных элементах. С CSS3 это уже не так.

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

от характеристики:

4.3. Flex Item Z-Заказ

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

5.4. Z-ось заказ: с z-index собственность

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

вот демонстрация z-index работа на non-positioned деталях гибкого трубопровода:https://jsfiddle.net/m0wddwxs/


добавление к ответу Buksy:

чтобы частично преодолеть проблему штабелирования содержимого, вы можете использовать свойства css для объединения отображения различных элементов, например:

opacity: 0.1;

или

display: none;