Как стековать элементы с помощью CSS

1656616932 kak stekovat elementy s pomoshhyu css

автор Вероника Ивгед

fBBb3U43Ntmfyfwq5GRIeT7cngjhpX3J1nIB
Фото All Bong на Unsplash

Я всегда боролся со свойством CSS z-index. Поначалу это звучит так просто. Элементы с большим значением z-индекса отображаются перед элементами с более низким значением z-индекса. Тем не менее, много раз я попадал в ситуации, когда казалось, что значение z-индекса вообще не влияло.

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

Порядок заключения по умолчанию

Давайте сначала упомянем порядок по умолчанию, в котором браузер вносит элементы, когда не применяется z-индекс:

  1. Корневой элемент (элемент )
  2. Неразмещенные элементы в порядке их определения
  3. Расположены элементы в том порядке, в каком они определены

Непозиционируемый элемент – это элемент со значением позиции по умолчанию статическим. Позиционированный элемент – это элемент с любым другим значением позиции. Примерами других значений являются: абсолютное, относительное, липкое или фиксированное.

HTML:

<div class=”pink”>
  <div class=”orange”></div>
</div>
<div class=”blue”></div>
<div class=”green”></div>

CSS:

/* This is only the CSS that is relevant for the example. For the complete CSS check the links below the pictures. */

.blue, .pink, .orange {
  position: absolute;
}
0ok6C2rWIvGF9pibC1xMz9q0iOmkqNWOx1cT
https://codepen.io/ivhed/pen/QrdEBB

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

Заключение с z-индексом

Если мы хотим изменить порядок заключения этих элементов, мы можем использовать свойство z-index. Элемент с более высоким z-индексом будет отображаться перед элементом с более низким z-индексом. Следует отметить, что z-индекс работает только с размещенными элементами.

.blue, .pink, .orange {
  position: absolute;
}

.blue {
  z-index: 2;
}

.orange {
  z-index: 3;
}

.green {
  z-index: 100; // has no effect since the green box is non-         positioned
}
NOdy4A6ZcslzfIFMD-PW5-vqD83i2Qb5vOrQ
https://codepen.io/ivhed/pen/xjqmpV

Оранжевое поле с более высоким z-индексом отображается перед синим полем.

Контекст заключения

Скажем, мы добавляем в макет еще одну расположенную коробку, которую мы хотим разместить за розовой коробкой. Мы обновляем наш код следующим образом:

HTML:

<div class=”pink”>
  <div class=”orange”></div>
</div>
<div class=”blue”></div>
<div class=”purple”></div>
<div class=”green”></div>

CSS:

.blue, .pink, .orange, .purple {
  position: absolute;
}

.purple {
  z-index: 0;
}

.pink {
  z-index: 1;
}

.blue {
  z-index: 2;
}

.orange {
  z-index: 3;
}

.green {
  z-index: 100;
}
Uuw9yAx1sVpyVHZ8sCRtVF8H5eBnyCElCH4S
https://codepen.io/ivhed/pen/YLZdjx

Наша розовая коробка, как и ожидалось, отображается перед фиолетовой коробкой, но что случилось с оранжевой коробкой? Почему он вдруг стоит за синим, даже если он имеет высший z-индекс? Это объясняется тем, что добавление значения z-индекса к элементу формирует то, что называется контекстом стека..

Розовое поле имеет значение z-индекса, отличное от auto, формирующего новый контекст стека. Тот факт, что он образует контекст стека, влияет на отображение его дочерних элементов.

Можно изменить порядок укладки дочерних частей розовой коробки. Однако их z-индекс имеет значение только в этом контексте.. Это означает, что мы не сможем переместить оранжевое поле перед синим, поскольку они больше не находятся в одном контексте стекания.

Если мы хотим, чтобы синее и оранжевое поле были частью одного контекста стекания, мы можем определить синее поле как дочерний элемент розового поля. Это заставит синее поле появиться позади оранжевого.

<div class=”pink”>
  <div class=”orange”></div>
  <div class=”blue”></div>
</div>
<div class=”purple”></div>
<div class=”green”></div>
T-Z7bkfgeKlqiz8WYbAlU0W9RMM4CtJgxw50
https://codepen.io/ivhed/pen/erGoJE

Контексты стекания формируются не только при применении z-индекса к элементу. Есть несколько других свойств, заставляющих элементы формировать контексты стекания. Некоторые примеры: фильтр, непрозрачность и трансформация.

Вернемся к нашему предыдущему примеру. Синяя коробка снова является братом розовой коробки. На этот раз вместо того, чтобы добавлять z-индекс к розовому полю, мы применяем к нему фильтр.

HTML:

<div class=”pink”>
  <div class=”orange”></div>
</div>
<div class=”blue”></div>
<div class=”green”></div>

CSS:

.blue, .pink, .orange {
  position: absolute;
}

.pink {
  filter: hue-rotate(20deg);
}

.blue {
  z-index: 2;
}

.orange {
  z-index: 3;
}

.green {
  z-index: 100;
}
JI1HNPrHCEUbKSZZiKSJLnBlWLyJKPclyEez
https://codepen.io/ivhed/pen/LmWMQb

Оранжевое поле все еще имеет более высокий z-индекс, чем синее, но все еще отображается за ним. Это объясняется тем, что значение фильтра заставило розовое поле образовать новый контекст стекания.

Резюме

Используя z-индекс для размещенных элементов, мы можем изменить порядок заключения по умолчанию.

При использовании определенных свойств CSS элемент может сформировать контекст стека. Значения Z-индекса имеют значение только в одном контексте стекания.

Для получения дополнительной информации о z-index я рекомендую статью. Я получил многое вдохновение, когда писал это.

Спасибо, что прочли! 🙂

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *