:: перед выпуском порядка псевдоэлементной укладки

При статическом размещении перед:: дочерним содержимым, перед слоем-потомком, перед слоем псевдоэлементов (z-index). Может ли кто-нибудь объяснить, почему или даже как это происходит, или если это проблема, которую имеют все основные браузеры?

<style>
div { background-color:yellow; width:400px; }
div::before { background-color:red; content:"div::before"; }
div::after { background-color:green; content:"div::after"; }
div p { background-color:blue; color:white; margin:-15px 0; padding:0; }
</style>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed tellus sed tellus sodales hendrerit tristique et elit.</p>
</div>

http://jsfiddle.net/funkyscript/ALrgf/

Ответ 1

Содержимое div, которое включает в себя два псевдоэлемента и элемент p, участвует в одном и том же контексте стекирования (относительно div). Это потому, что, как вы заметили, все три из них статически расположены; другими словами, не позиционируется вообще. (Да, эти элементы стекают вдоль оси z во время потока, вы просто не можете управлять их уровнями стека, используя z-index, потому что они не расположены.)

Здесь приведено резюме ¹ порядка, в котором рисуются различные части, жирные акценты, если это необходимо для вашего вопрос:

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

В каждом контексте стекирования следующие слои окрашиваются в обратном порядке:

фон и границы элемента, образующего контекст укладки.

дочерние стекирующие контексты с отрицательными уровнями стека (в первую очередь отрицательные).

входящие, не-встроенные, не-позиционные потомки.

непозиционированные поплавки.

встроенные потоки inline-уровня, не связанные с ними, включая встроенные таблицы и встроенные блоки.

дочерние стекирующие контексты с уровнем стека 0 и позиционируемыми потомками с уровнем стека 0.

дочерние стекирующие контексты с положительными уровнями стека (сначала наименее положительные).

Так как div::before вставлен перед содержимым div, а после него вставлен div::after, когда они отображаются внутри строки в статическом положении, они, естественно, следуют этому правилу, даже если сэндвич блокирует элемент ( при заказе учитываются как блок-боксы, так и встроенные ящики).

Обратите внимание, что, по очевидным причинам, фоны обычно нарисовываются сначала, а содержимое их накладывается:

Элемент p, как элемент уровня блока, имеет фон, который сначала нарисовал (# 3).
Псевдоэлементы inline-уровня затем рисуются фоном по фону p (# 5). В модели форматирования они являются братьями и сестрами элемента p, поэтому все они участвуют в контексте стекирования div, а не в p.
Псевдоэлемент div::before (как его содержимое, так и фон) появляется за текстом p, поскольку он предшествует p в визуальном дереве.
Псевдоэлемент div::after (как его содержимое, так и фон) появляется перед текстом p, поскольку он появляется после p в визуальном дереве.

Как указано в моем комментарии, если вы создадите псевдоэлементы в виде блоков, фон div::before будет скрываться за этим элемента p, но не текста; вместо этого текст div::before будет располагаться между фоном и текстом элемента p. Также обратите внимание, что фон div::after окрашен перед символом p, а содержимое окрашено в крайнее. Опять же, это связано с тем, что фоны окрашиваются до или после содержимого по отношению к вышеприведенным правилам.

¹_{Более подробное описание можно найти в приложении E спецификации.к югу >}