Каковы правила по умолчанию для перекрывающихся элементов в CSS?

Question

Я пытаюсь научить себя html и CSS через w3schools, и в нем упоминается, что если значения z не указаны, элементы, помещенные последними в html-код, будут показаны сверху. Однако в their example, если мы закомментируем z-индекс изображений, чтобы ни один не был указан, изображение все еще отображается вверху. Должен ли порядок сверху вниз заголовок, затем изображение, затем абзац, так как это порядок, в котором они указаны в коде? Используются ли их особые правила перекрытия, о которых я не знаю?

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

Answer 1

Это потому, что изображение абсолютно позиционируется. Из spec,

В пределах каждого контекста укладки, следующие слои окрашены в обратно к передней порядка:

1. фона и границы элемента формирования контекста при штабелировании.
2. Контексты для дочерних стеков с отрицательными уровнями стека (наиболее отрицательные сначала).
3. Входящие, не-встроенные, не-расположенные потомки.
4. непозиционированные поплавки.
5. потоковые, встроенные потоки, встроенные и встроенные блоки.
6. дочерние стекирующие контексты с уровнем стека 0 и позиционируемыми потомками с уровнем стека 0.
7. дочерние стекирующие контексты с положительными уровнями стека (с наименьшим положительным первым).

Если удалить z-index, изображение окрашивается в шаге 6 в передней части пункта на этапе 3 и текст абзаца на шаге 5.

Answer 2

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

Answer 3

Вот часть спецификации, что я только что закончил чтение: https://www.w3.org/TR/html5/embedded-content-0.html#the-img-element

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

Иными словами, ваш браузер сначала получает HTML-документ по HTTP-запросу на сервер. Этот HTML-документ имеет тег <img> с атрибутом src, который затем запускает другой HTTP-запрос на сервер для фактического файла для этого тега изображения. Без набора z-index браузер просто нарисует это изображение поверх других элементов.

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

EDIT:

Как Ориоль указала в спецификации, что объясняет пример w3schools, а также другой фрагмент кода связан с: Image overlapping over div

В этом случае, это выглядит как <img> элемент было бы в строке и поэтому было бы нарисовано на шаге 5, тогда как на этапе 3 будет отображаться <div> с.