Z-index antes de pseudo-elemento

He creado un ‘encabezado’ elemento antes de pseudo elemento. el pseudeo elemento debe estar detrás del elemento padre.
Todo funciona muy bien hasta el momento en el que doy mi ‘encabezado’ z-index.

Lo que quiero: el amarillo de La ‘cabecera’ en el primer plano, el rojo pseudo-elemento en el fondo y un simple índice z de 30 en el amarillo de la ‘cabecera’ elemento.

header { 
    background: yellow;
    position:relative;
    height: 100px;
    width: 100px;
    z-index:30; /*This is the problem*/
}

header::before { 
    content:"Hide you behind!";
    background: red;
    position:absolute;
    height: 100px;
    width: 100px;
    top:25px;
    left:25px;
    z-index:-1;
}

Usted puede probar mi problema en este enlace (http://jsfiddle.net/tZKDy/) y ves el problema al establecer o quitar el z-index en la de ‘cabecera’ elemento.

  • «Lo que quiero: el amarillo de La ‘cabecera’ en el primer plano, el rojo pseudo-elemento en el fondo y un simple índice z de 30 en el amarillo de la ‘cabecera’ elemento». … «Todo funciona muy bien hasta el momento en que me dan ‘mi cabecera» z-index» suena como lo que usted desea que se produce cuando el z-index se aplica. lo que está mal con el z-index de ser aplicada?
InformationsquelleAutor Tom Claus | 2011-10-19

1 Kommentar

  1. 32

    El ::antes de pseudo-elemento se coloca en el interior del elemento de encabezado.

    Especificación de CSS:

    El :before y :after pseudo-elementos que interactúan con otros cuadros como si fueran verdaderos elementos insertados simplemente dentro de su elemento asociado.

    Configuración de la z-index para el elemento de encabezado crea un nuevo Contexto de Apilamiento, por lo que el nuevo pseudo elemento creado no puede flotar detrás de la cabecera elemento, porque tendría que ir fuera de ese Contexto de Apilamiento.

    Sugiero que simplemente preceder a la cabecera elemento por otro elemento, por lo que se acumula correctamente de forma predeterminada. Ejemplo.

    • Por desgracia, el Ejemplo está roto: el CSS falta una llave de cierre en la primera regla. I bifurcada y fijo es.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea