¿Es posible establecer el orden de apilamiento de pseudo-elementos debajo de su elemento padre?
Estoy tratando de estilizar un elemento con el selector CSS de pseudo elemento :after
#element {
position: relative;
z-index: 1;
}
#element::after {
position:relative;
z-index: 0;
content: " ";
position: absolute;
width: 100px;
height: 100px;
}
Parece que el elemento ::after no puede ser inferior al elemento en sí.
¿Hay una manera de tener el pseudo elemento más bajo que el elemento mismo?
7 answers
Los pseudo-elementos son tratados como descendientes de su elemento asociado. Para colocar un pseudo-elemento debajo de su padre, debe crear un nuevo contexto de apilamiento para cambiar el orden de apilamiento predeterminado.
El posicionamiento del pseudo-elemento (absoluto) y la asignación de un valor de índice z que no sea "auto" crea el nuevo contexto de apilamiento.
#element {
position: relative; /* optional */
width: 100px;
height: 100px;
background-color: blue;
}
#element::after {
content: "";
width: 150px;
height: 150px;
background-color: red;
/* create a new stacking context */
position: absolute;
z-index: -1; /* to be below the parent element */
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Position a pseudo-element below its parent</title>
</head>
<body>
<div id="element">
</div>
</body>
</html>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-21 20:23:07
Sé que este es un hilo viejo, pero siento la necesidad de publicar la respuesta adecuada. La respuesta real a esta pregunta es que necesita crear un nuevo contexto de apilamiento en el padre del elemento con el pseudo elemento (y en realidad tiene que darle un índice z, no solo una posición).
Así:
#parent {
position: relative;
z-index: 1;
}
#pseudo-parent {
position: absolute;
/* no z-index allowed */
}
#pseudo-parent:after {
position: absolute;
top:0;
z-index: -1;
}
No tiene nada que ver con el uso de pseudo elementos :before o :after.
#parent { position: relative; z-index: 1; }
#pseudo-parent { position: absolute; } /* no z-index required */
#pseudo-parent:after { position: absolute; z-index: -1; }
/* Example styling to illustrate */
#pseudo-parent { background: #d1d1d1; }
#pseudo-parent:after { margin-left: -3px; content: "M" }<div id="parent">
<div id="pseudo-parent">
</div>
</div>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-14 13:05:37
Hay dos cuestiones en juego aquí:
La especificación CSS 2.1 establece que " Los elementos pseudo-elementos: before y: after interactúan con otros cuadros, como los cuadros de ejecución, como si fueran elementos reales insertados justo dentro de su elemento asociado."Dada la forma en que se implementan los índices z en la mayoría de los navegadores, es bastante difícil (leer, no conozco una manera) mover el contenido por debajo del índice z de su elemento padre en el DOM que funciona en todos navegador.
El número 1 anterior no significa necesariamente que sea imposible, pero el segundo impedimento es en realidad peor: En última instancia, es una cuestión de soporte del navegador. Firefox no soportó el posicionamiento del contenido generado hasta FF3. 6. Quién sabe de navegadores como IE. Así que incluso si puedes encontrar un hack para que funcione en un navegador, es muy probable que solo funcione en ese navegador.
Lo único que se me ocurre que va a funcionar en todos los navegadores es usar javascript para insertar el elemento en lugar de CSS. Sé que no es una gran solución, pero los pseudo-selectores :before y :after realmente no parecen que vayan a cortarlo aquí.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-06-14 19:53:41
Hablando con respecto a la especificación ( http://www.w3.org/TR/CSS2/zindex.html ), dado que un.someSelector está posicionado, crea un nuevo contexto de apilamiento del que sus hijos no pueden salir. Deje un.someSelector sin posicionar y luego un.someSelector:after secundario puede colocarse en el mismo contexto que un.someSelector.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-06-14 20:20:12
Sé que esta pregunta es antigua y tiene una respuesta aceptada, pero encontré una mejor solución al problema. Lo estoy publicando aquí para no crear una pregunta duplicada, y la solución todavía está disponible para otros.
Cambia el orden de los elementos. Utilice el pseudo-elemento :before para el contenido que debe estar debajo, y ajuste los márgenes para compensar. La limpieza de márgenes puede ser desordenada, pero se conservará el z-index deseado.
He probado esto con IE8 y FF3. 6 exitoso.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-02-28 20:09:00
Pruébalo
el {
transform-style: preserve-3d;
}
el:after {
transform: translateZ(-1px);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-19 21:49:35
Establece el z-index del pseudo elemento :before o :after en -1 y dale un position que respete la propiedad z-index (absolute, relative, o fixed). Esto funciona porque el z-index del pseudo elemento es relativo a su elemento padre, en lugar de <html>, que es el predeterminado para otros elementos. Lo cual tiene sentido porque son elementos hijos de <html>.
El problema que estaba teniendo (que me llevó a esta pregunta y la respuesta aceptada anteriormente) era que estaba tratando de usar un pseudo elemento :after para obtener fantasía con un fondo a un elemento con z-index de 15, e incluso cuando se establece con un z-index de 14, todavía estaba siendo renderizado en la parte superior de su padre. Esto es porque, en ese contexto de apilamiento, su padre tiene un z-index de 0.
Esperemos que eso ayude a aclarar un poco lo que está pasando.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-17 03:08:11