Почему элемент со значением z-index не может покрыть своего потомка?

Question

Сегодня, после четырех часов отладки, я усвоил это правило сложным способом:

Родительский элемент никогда не сможет покрыть (сложить поверх) свой дочерний элемент, если родительский элемент имеетz-индекс любого значения, независимо от того, как вы меняете CSS ребенка

. Как я могу понять это поведение с помощью логики?Где это указано в спецификации?

Код (также в CodePen ):

.container {
  width: 600px;
  height: 600px;
  background-color: salmon;
  position: relative;
  z-index: 99;
  margin-top: 20px;
  padding-top: 10px;
}

h1 {
  background-color: pink;
  position: relative;
  z-index: -1;
  font-family: monospace;
}

<div class="container">
  <h1>1. I can never be covered by parent if my z-index is positive.</h1>
  <h1>2. Even when my z-index is nagative, I still can never be covered if my parent has any z-index at all.</h1>
</div>

Answer 1

Вам нужно знать две важные вещи: порядок рисования и контекст наложения.Если вы обратитесь к спецификации , вы можете узнать, как и когда элементы окрашиваются.

Контексты стека , образованные позиционированными потомками с отрицательными z-индексами (исключая 0) в порядке z-index (сначала наиболее отрицательным), затем в порядке дерева.

---

Все позиционированные, непрозрачные или преобразованные потомки, в порядке дерева, которые делятся на следующие категории:

1. Все позиционированные потомки с 'z-index: auto' или 'z-index: 0', в порядке дерева.

---

Контексты стека , образованные позиционированными потомками с z-индексами, большими или равными 1 в порядке z-индекса (наименьший сначала), затем в порядке дерева.

Из этого ясно, что сначала мы рисуем элементы с отрицательным z-index на шаге (3), затем элемент с z-index, равным 0 на шаге (8), и, наконец, элементы с положительным z-index на этапе (9), что логично.Мы также можем прочитать:

Каждая коробка принадлежит одному контексту стека .Каждый блок в данном контексте стека имеет целочисленный уровень стека, который является его положением на оси z относительно других блоков в том же контексте стека .Ящики с более высокими уровнями стека всегда форматируются перед ячейками с более низкими уровнями стека.Коробки могут иметь отрицательные уровни стека.Боксы с одинаковым уровнем стека в контексте стекирования располагаются снизу вверх в соответствии с порядком дерева документов.

Также

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

---

Чтобы понять, когда будет нарисован каждый элемент, вам нужно знать его контекст стека и его уровень стека внутри этого контекста стека (определяется z-index).Вы также должны знать, устанавливает ли этот элемент контекст стека.Это сложная часть, потому что установка z-index сделает это:

Для позиционированного блока свойство z-index задает:

1. Уровень стекаполе в текущем контексте стекирования.
2. устанавливает ли блок контекст контекста

Значения имеют следующие значения:

<integer>

Это целое число - уровень стека сгенерированного блока в текущем контексте стека.Блок также устанавливает новый контекст стека .

auto

Уровень стека сгенерированного блока в текущем контексте стека равен 0. Блок не устанавливает новый контекст стека , если он не является корневым элементом.

---

Теперь у нас есть вся информация, чтобы лучше понять каждый случай.Если родительский элемент имеет значение z-index, отличное от auto, то он создаст контекст стека, таким образом, дочерний элемент будет закрашен внутри независимо от того, является ли их z-index (отрицательным или положительным).z-index дочернего элемента просто скажет нам порядок рисования внутри родительского элемента (это охватывает вашу вторую точку) .

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

не может иметь родительский элемент над дочерним элементом при установке положительного z-index для дочернего элемента.Также невозможно иметь родительский элемент выше дочернего, если мы установим z-index для родительского элемента, отличного от auto (положительного или отрицательного).

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

---

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

Answer 2

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

Дочерний элемент ВСЕГДА получает контекст стека на основе своего родителя.Отсюда необходимость отрицательного значения z-index, чтобы вытолкнуть дочерний элемент «позади» его стекового контекста parent (0).

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

Answer 3

Как я могу понять это поведение по логике?

Мне трудно понять вашу проблему по логике.Родитель содержит своих детей.Чаша может быть накрыта другой чашей.Но вы не можете накрыть суп миской, если не выложите суп из миски.

z-Index устанавливает порядок перекрывающихся элементов.Родитель не может перекрывать своего ребенка.

Имхо, это совершенно логично.

Answer 4

Документация Mozilla говорит

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

Вот дополнительная логика из другой статьи о StackOverflow, касающейся детей и потомков.