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

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

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

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

или

z-index:100 // on the div above

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

5 108
html css css3 z-index

5 ответов:

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

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

307

элементы должны иметь атрибут "позиция". (например, абсолютный, относительный, фиксированный) или Z-индекс не будет работать

24

если вы установите положение в другое значение, чем static но все еще не работает, может быть, какой-то родительский элемент имеет 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 на 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

19

во многих случаях элемент должен быть расположен на 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 рисуют точно так же, как встроенные блоки, за исключением того, что порядок изменения документа используется вместо raw порядок документов, и z-index значения auto создать контекст стекирования, даже если position и static.

5.4. Упорядочение по оси Z: The z-index собственность

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

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

17

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

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

opacity: 0.1;

или

display: none;
0