Так что, если я z-index
правильно понимаю , было бы идеально в этой ситуации:
Я хочу разместить нижнее изображение (тег / карточку) под div над ним. Таким образом, вы не можете видеть острые края. Как мне это сделать?
z-index:-1 // on the image tag/card
или
z-index:100 // on the div above
тоже не работает. Ни одна из этих комбинаций не делает ничего подобного. Как придешь?
Stacking Context
.position: relative
static
элементы статические и не могут передвигаться вx, y or z planes
. Они не могут двигатьсяx plane (left or right)
илиy plane (top or bottom)
нравится, когда мы работаемposition: absolute
. И при этом они не могут двигаться вz plane i.e. with z-index
.z-index
элемента сетки?Если вы устанавливаете значение, отличное от значения,
static
но ваш элементz-index
все еще не работает, возможно, установлен какой-то родительский элементz-index
.Контексты стекирования имеют иерархию, и каждый контекст стекирования рассматривается в порядке наложения контекста стекирования родителя.
Так что со следующим html
независимо от того, насколько велико будет значение
z-index
ofel3
, оно всегда будет ниже,el1
поскольку его родитель имеет более низкий контекст стека. Вы можете представить порядок наложения как уровни, где порядок наложенияel3
фактически равен 3.8, что ниже 5 .Если вы хотите проверить контексты стека родительских элементов, вы можете использовать это:
На MDN есть отличная статья о контекстах наложения
источник
Ваши элементы должны иметь
position
атрибут. (напримерabsolute
,relative
,fixed
) илиz-index
не будет работать.источник
Во многих случаях элемент должен быть расположен для
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
.Из спецификации:
Вот демонстрация
z-index
работы с не позиционированными элементами Flex: https://jsfiddle.net/m0wddwxs/источник
position: static
точно так же, как иposition: relative
для элементов flex и grid из-за динамической природы этих методов компоновки. Так что я бы, возможно, сказал, что дело не в том, что в CSS3 больше нет необходимости позиционировать элемент, а в том, что CSS3 обрабатывает элементы flex и grid так, как если бы они были позиционированы, независимо от этого. Хотя, возможно, всего два взгляда на одно и то же.position:relative
. Потомки гибких элементов с абсолютным положением не будут рассматривать гибкий элемент как содержащий их блок, поскольку гибкий элемент не позиционируется. ( jsfiddle.net/0yo7utfL/2 )overflow-y: scroll
мешаетoverflow-x: visible
работать ... пожалуйста, посмотрите?