Psychotik

solucionando marrones desde 2003

Solucionar los problemas de “position” en pseudo-elementos :after y :before

Pertenece a  Tips rápidos  el 4 octubre

Si estáis empezando a utilizar los pseudo-elementos :after y :before quizá os hayáis encontrado con un problema muy de diario, cuando queremos que nuestro elemento principal, por ejemplo un <div>, tenga por detrás algún detalle creado con estos pseudo-elementos, lo normal es que jugamos dándole un position:relative al <div> y position:absolute a los pseudo-elementos, pero nos encontramos que por defecto, se nos ponen por delante del <div>, la lógica nos dirá que debemos utilizar un z-index superior para el <div> y eso debería solucionarlo, pero si estáis leyendo esto, es por qué eso, no sucede…

La solución (obscenamente sencilla):

En nuestras css le diremos a :after y/o :before según necesitemos que se posicionen detrás, que su z-index sea negativo, así de sencillo, a veces nos olvidamos que algunas propiedades puede tener valores negativos y curiosamente aquí, aunque nuestro valor fuese 0 y el del <div> 999, no funcionaría, sin embargo con un simple valor -1, voilà:

:after,:before{
   content:"";
   display:block;
   position:absolute;
   /* Las propiedades que tengamos para darle estilos y nuestro -1 */
   z-index:-1;
}


Volver atrás

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Lo está petando!

Volver arriba
Utilizamos cookies para garantizar que tu experiencia en Psychotik sea la mejor posible
Saber más sobre nuestras galletitas »