Понимание порядка укладки индекса z

Я немного запутался в использовании z-index для определения порядка стека.

Я не совсем понимаю, как браузеры обрабатывают элементы с свойством position в сочетании с теми, у кого нет.

Существует ли общее правило для определения порядка элементов стека, независимо от того, имеет ли он явно позиционированные элементы или нет?

Приняты примеры различных ситуаций. Вообще говоря:

  • смешанный брат <div> с набором позиций и без установки позиции.
  • вложенный <div>, смешанный со словом <div> с набором позиций и без набора позиций.

Ответы

Ответ 1

Основы свойства CSS z-index

Простая концепция

Свойство z-index основано на простой концепции: Элементы с более высокими значениями будут сидеть перед элементами с более низкими значениями вдоль оси z. Поэтому, если вы применяете z-index: 1 к div.box1, а div.box2 имеет z-index: 0, то div.box1 будет накладываться div.box2.

В терминах оси z это относится к глубине на трехмерной плоскости. На вашем компьютере это можно интерпретировать как плоскость, на которой объекты движутся все ближе и дальше от вас. (Подробнее о Декартовой системе координат.)

enter image description here Источник: Wikipedia

z-index работает с позиционированными элементами

Если вы не используете элементы гибкости или элементы сетки, свойство z-index работает только с расположенными элементами. Это означает, что вы можете использовать z-index для элементов с position: absolute, position: relative, position: fixed или position: sticky. Если элемент имеет position: static (значение по умолчанию) или какую-либо другую схему позиционирования, такую ​​как float, то z-index не будет иметь эффекта.

Как отмечено, хотя z-index, как определено в CSS 2.1, применяется только к позиционированным элементам, flex items и элементы сетки могут создайте контекст стекирования, даже если position - static.

4.3. Flex Item Z-Ordering

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

5.4. Ось Z-порядка: свойство z-index

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

Здесь показана демонстрация z-index, работающей с непозиционированными элементами гибкости: https://jsfiddle.net/m0wddwxs/

Укладка контекстов

Когда элемент позиционируется и применяется z-index, создается контекст стекирования.

(Также см.: Полный список условий, в которых создается контекст стекирования.)

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

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

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

Группы элементов с общим родителем, которые перемещаются вперед или назад вместе в порядке укладки составляют то, что известно как укладка контекст. Полное понимание контекстов стекирования - ключ к действительному понимая, как работают z-индекс и порядок укладки.

Каждый контекст стекирования имеет один элемент HTML в качестве его корневого элемента. Когда новый элемент стекирования формируется на элементе, эта укладка контекст ограничивает все его дочерние элементы определенным местом в порядок укладки. Это означает, что если элемент содержится в стекирования в нижней части порядка укладки, нет способа чтобы он появился перед другим элементом в другом контекст стекирования, который выше в порядке укладки, даже с z-индекс миллиарда!

~ Что никто не сказал вам о Z-индексе

Порядок укладки

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

  • Фоны и границы корневого элемента
  • Нерасполагаемые, неплавающие элементы блока в порядке их появления в исходном коде
  • Непоставленные плавающие элементы в порядке их появления в исходном коде
  • Встроенные элементы
  • Позиционированные элементы в порядке их появления в исходном коде

Если применяется свойство z-index, порядок укладки изменяется:

  • Фоны и границы корневого элемента
  • Позиционированные элементы с z-index меньше 0
  • Нерасполагаемые, неплавающие элементы блока в порядке их появления в исходном коде
  • Непоставленные плавающие элементы в порядке их появления в исходном коде
  • Встроенные элементы
  • Позиционированные элементы в порядке их появления в исходном коде
  • Позиционированные элементы с z-index больше 0

Источник: W3C

Нижняя строка: Когда вы понимаете контексты стекирования, z-index легко.

Примеры z-index в действии: Как работает z-index!

Для краткой, но высокоинформативной статьи, объясняющей z-index (в том числе, как opacity влияет на порядок стекирования): Что никто не сказал вам о Z- Индекс

Для полного изложения на z-index, со многими примерами и иллюстрациями, см.: MDN Понимание CSS z-index

И для глубокого погружения в контексты укладки читайте: W3C. Подробное описание стековых контекстов