hijos - selector padre css
¿Es posible establecer el orden de apilamiento de los pseudo-elementos debajo de su elemento padre? (7)
Estoy tratando de diseñar un elemento con el :after pseudo elemento CSS selector
#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 más bajo que el elemento en sí.
¿Hay una manera de tener el pseudo elemento más bajo que el elemento en sí?
Establezca el z-index del :before o :after pseudo elemento en -1 y asigne una position que respete la propiedad del z-index ( absolute , relative o fixed ). Esto funciona porque el z-index del pseudo-elemento es relativo a su elemento principal, en lugar de <html> , que es el valor predeterminado para otros elementos. Lo que tiene sentido porque son elementos secundarios 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 :after pseudo elemento para obtener fantasía con un fondo para un elemento con z-index de 15, e incluso cuando estaba configurado con un z-index de 14, aún estaba siendo renderizado en la parte superior de su padre. Esto se debe a que, 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.
Hablando con respecto a la especificación ( http://www.w3.org/TR/CSS2/zindex.html ), dado que a.someSelector está posicionado, crea un nuevo contexto de apilamiento que sus hijos no pueden romper. Deje un.someSelector sin posicionar y luego un secundario a.someSelector: después se puede colocar en el mismo contexto que a.someSelector.
Hay dos temas en juego aquí:
La especificación CSS 2.1 indica que "Los elementos: antes y después de los pseudo-elementos interactúan con otras cajas, como las cajas de entrada, 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 (lea, no conozco una forma) mover el contenido por debajo del índice z de su elemento principal en el DOM que funciona en todos los navegadores.
El número 1 anterior no significa necesariamente que sea imposible, pero el segundo impedimento para ello es realmente peor: en última instancia, es una cuestión de soporte del navegador. Firefox no admitió la posición del contenido generado hasta FF3.6. Quién sabe de navegadores como IE. Así que incluso si puedes encontrar un truco para que funcione en un navegador, es muy probable que solo funcione en ese navegador.
Lo único que puedo pensar de 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 el: antes y después de los pseudo-selectores realmente no parece que vayan a cortarlo aquí.
Pruébalo
el {
transform-style: preserve-3d;
}
el:after {
transform: translateZ(-1px);
}
Sé que esta pregunta es antigua y tiene una respuesta aceptada, pero encontré una mejor solución al problema. Lo estoy publicando aquí, así que no creo una pregunta duplicada y la solución todavía está disponible para otros.
Cambia el orden de los elementos. Use :before pseudo-elemento para el contenido que debe estar debajo, y ajuste los márgenes para compensar. La limpieza del margen puede ser complicada, pero se conservará el z-index deseado.
He probado esto con IE8 y FF3.6 con éxito.
Sé que este es un hilo viejo, pero siento la necesidad de publicar la respuesta correcta. La respuesta real a esta pregunta es que necesita crear un nuevo contexto de apilamiento en el elemento primario del elemento con el pseudo elemento (y en realidad tiene que darle un índice z, no solo una posición).
Me gusta esto:
#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: antes o: después de pseudo elementos.
#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>
Pseudo-elements 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.
La ubicación del pseudoelemento (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>