Esto no tiene sentido para mí. ¿No debería :: antes de procesarse antes del lapso? Funciona si agrego position: relative al elemento hijo.

Esto podría tener algo que ver con el contexto de apilamiento, pero no estoy seguro de cómo exactamente.

https://www.w3.org/TR/CSS21/visuren.html#layers

El lapso en este caso cae en el # 3 porque no está posicionado y :: antes del # 6 porque es un descendiente posicionado?

div { position:relative; }

div:before {
  content: '';
  width: 100%;
  height: 100%;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
}

/* Adding this works: */
/* span { position: relative; } */
<div>
  <span>Test</span>
</div>
css
0
chh 21 oct. 2017 a las 16:00

3 respuestas

La mejor respuesta

Si un elemento no tiene position establecido, entonces se establece bastante bajo en el diseño. Si coloca cualquier elemento como absolute, debe asignar position a todos los elementos hermanos. En este ejemplo, ::before y span son hermanos, y dado que ::before tiene posición y span no ::before es más "importante"

1
zmuci 21 oct. 2017 a las 13:09

El funcionamiento de la clase CSS :pseudo es que el elemento se agregará antes y dentro de el elemento.

así:

<div>
  :before
  <span>Test</span>
</div>

No soy muy lo que necesitas lograr, pero para explicar tu duda, la razón por la que estás produciendo el resultado actual después de agregar position:relative a tu div es porque :before está configurado con position:absolute. Al hacerlo, extraerá el elemento: before de la jerarquía html actual y se posicionará en relación con el elemento más cercano donde establezca div { position:relative; }.

Como el antes se está sacando de la jerarquía, <span> llenará el espacio vacío disponible (también superpuesto por: antes).

0
Vincent1989 21 oct. 2017 a las 13:12

Como especificó que la posición es absolute, hace que el contenido esté en otro nivel de flujo. Puede intentar especificar z-index, sin embargo, incluso eso no siempre funciona. Por ejemplo, si tiene algún elemento con posicionamiento absolute/relative, estará sobre static con cualquier número de índice z.

0
Sergey 21 oct. 2017 a las 13:07