:: antes del problema de orden de astackmiento de pseudo-elemento

Cuando está posicionado estáticamente, el :: pseudo elemento antes se acumula (índice Z) antes del contenido del niño, pero después del fondo del niño. ¿Alguien puede explicar por qué o incluso cómo está sucediendo esto o si este es un problema que tienen todos los navegadores principales?

 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; }  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed tellus sed tellus sodales hendrerit tristique et elit.

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

Los contenidos del div , que incluyen los dos pseudoelementos y el elemento p , participan en el mismo contexto de astackmiento (relativo al div ). Esto se debe a que, como usted nota, los tres están en una posición estática; en otras palabras, no colocado en absoluto. (Sí, estos elementos se acumulan a lo largo del eje z durante el flujo; simplemente no puede manipular sus niveles de stack con z-index porque no están posicionados).

Aquí hay un resumen 1 del orden en el que se dibujan las distintas partes, énfasis en negrita donde sea relevante para su pregunta:

Cada caja pertenece a un contexto de astackmiento . Cada cuadro posicionado en un contexto de astackmiento dado tiene un nivel de stack entera, que es su posición en el eje z con relación a otros niveles de astackmiento dentro del mismo contexto de astackmiento. Las cajas con mayores niveles de stack siempre se formatean frente a las casillas con niveles de stack más bajos. Las cajas pueden tener niveles de stack negativos. Las casillas con el mismo nivel de stack en un contexto de astackmiento se astackn de atrás hacia delante de acuerdo con el orden de árbol del documento.

Dentro de cada contexto de astackmiento, las siguientes capas están pintadas en orden inverso:

  1. el fondo y los bordes del elemento que forma el contexto de astackmiento.
  2. los contextos de astackmiento de niños con niveles de stack negativos (la mayoría negativos primero).
  3. los descendientes in-flow, non-line-level, no-posicionados.
  4. los flotadores no posicionados
  5. los descendientes in-flow, en línea, no posicionados, incluidas las tablas en línea y los bloques en línea.
  6. los contextos de astackmiento de niños con nivel de stack 0 y los descendientes posicionados con nivel de stack 0.
  7. los contextos de astackmiento de niños con niveles de stack positivos (el menos positivo primero).

Dado que div::before se inserta antes que el contenido del div , y div::after se inserta después de él, cuando se visualizan en línea en una posición estática, naturalmente seguirán esta regla, incluso si intercalan un elemento de bloque (el orden toma tanto cajas de bloque como cajas en línea en cuenta).

Tenga en cuenta que, por razones obvias, los fondos generalmente se pintan primero, con el contenido superpuesto a ellos:

  1. El elemento p , como un elemento de nivel de bloque, tiene un fondo que se pinta primero (# 3).

  2. Los pseudo-elementos de nivel en línea se dibujan con sus fondos sobre el fondo p (# 5). En el modelo de formato, son hermanos del elemento p , por lo que todos participan en el contexto de astackmiento del div y no en el del p .

  3. El pseudo-elemento div::before (tanto su contenido como el fondo) aparece detrás del texto p porque aparece antes que p en el árbol visual.

  4. El pseudo-elemento div::after (tanto su contenido como su fondo) aparece delante del texto p porque viene después de p en el árbol visual.

Como indiqué en mi comentario, si haces que los pseudo-elementos se muestren como bloques , el fondo de div::before se ocultará detrás del elemento p , pero no del texto; en su lugar, el texto de div::before colocará entre el fondo y el texto del elemento p . También observe que el fondo del div::after está pintado delante del de la p , mientras que el contenido está pintado en primer plano. De nuevo, esto tiene que ver con que los fondos se pinten antes o después del contenido en relación con las reglas anteriores.


1 Una descripción mucho más detallada se puede encontrar en el Apéndice E de la especificación.