Usando la propiedad de transformación, el índice Z se cancela y aparece en el frente. (Al comentar -webkit-transform, z-index funciona correctamente en el código siguiente)
.test { width: 150px; height: 40px; margin: 30px; line-height: 40px; position: relative; background: white; -webkit-transform: rotate(10deg); } .test:after { width: 100px; height: 35px; content: ""; position: absolute; top: 0; right: 2px; -webkit-box-shadow: 0 5px 5px #999; /* Safari and Chrome */ -webkit-transform: rotate(3deg); /* Safari and Chrome */ transform: rotate(3deg); z-index: -1; }
transform z-index is canceled.
¿Cómo funcionan el transformador y el z-index juntos?
Veamos lo que está ocurriendo. Para empezar, tenga en cuenta que z-index
en elementos posicionados y transform
por sí mismo crear nuevos ” contextos de astackmiento ” en los elementos. Esto es lo que está pasando:
Su elemento .test
tiene una transform
establecida en algo distinto de none, lo que le da su propio contexto de astackmiento.
A continuación, agrega un .test:after
pseudo-element, que es un elemento secundario de .test
. Este elemento secundario tiene z-index: -1
, estableciendo el nivel de stack de .test:after
dentro del contexto de astackmiento de .test
Configuración de z-index: -1
en .test:after
no lo coloca atrás .test
porque solo z-index
tiene significado dentro de un contexto de astackmiento dado.
Cuando elimina -webkit-transform
de .test
, elimina su contexto de astackmiento, lo que provoca .test
y .test:after
de compartir un contexto de astackmiento (el de ) y hacer
.test:after
ir detrás de .test
. Tenga en cuenta que después de eliminar la .test
‘s -webkit-transform
puede, una vez más, darle su propio contexto de astackmiento estableciendo una nueva regla z-index
(cualquier valor) en .test
(de nuevo, porque está posicionado).
Entonces, ¿cómo resolvemos tu problema?
Para que el índice Z funcione de la manera .test
, asegúrese de que .test
y .test:after
comparten el mismo contexto de astackmiento. El problema es que quieres que el .test
gire con la transformación, pero hacerlo significa crear su propio contexto de astackmiento. Afortunadamente, coloca .test
en un contenedor de envoltura y girando, lo que permitirá que sus hijos compartan un contexto de astackmiento al mismo tiempo que rotan ambos.
Esto es lo que comenzó con: http://jsfiddle.net/fH64Q/
Y esta es una forma de evitar los contextos de astackmiento y mantener la rotación (tenga en cuenta que la sombra se corta un poco debido al fondo blanco del .test
):
.wrapper { -webkit-transform: rotate(10deg); } .test { width: 150px; height: 40px; margin: 30px; line-height: 40px; position: relative; background: white; } .test:after { width: 100px; height: 35px; content: ""; position: absolute; top: 0; right: 2px; -webkit-box-shadow: 0 5px 5px #999; /* Safari and Chrome */ -webkit-transform: rotate(3deg); /* Safari and Chrome */ transform: rotate(3deg); z-index: -1; }
z-index is canceled.
Estaba enfrentando el problema similar. Lo que hice fue, agregué un envoltorio div alrededor de la prueba y le di la propiedad de transformación al div envoltorio.
.wrapper{ transform: rotate(10deg); }
aquí está el violín http://jsfiddle.net/KmnF2/16/