Почему z-индекс не работает?
Итак, если я понимаю z-index
правильно, было бы идеально в этой ситуации:
Я хочу поместить нижнее изображение (тег/карту) ниже 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));
во многих случаях элемент должен быть расположен на 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
.
от характеристики:
элементы Flex рисуют точно так же, как встроенные блоки, за исключением того, что заказ-измененный порядок документа используется вместо raw порядок документов и
z-index
значенияauto
создать контекст укладки, даже еслиposition
isstatic
.5.4. Z-ось заказ: с
z-index
собственностьпорядок рисования элементов сетки точно такой же, как и встроенные блоки, за исключением того, что порядок измененного документа используется вместо заказа необработанного документа, и
z-index
значенияauto
создать контекст укладки, даже еслиposition
isstatic
.
вот демонстрация z-index
работа на non-positioned деталях гибкого трубопровода:https://jsfiddle.net/m0wddwxs/
добавление к ответу Buksy:
чтобы частично преодолеть проблему штабелирования содержимого, вы можете использовать свойства css для объединения отображения различных элементов, например:
opacity: 0.1;
или
display: none;