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/