z-index é cancelado configurando-se transform (girar)

Usando a propriedade transform, o z-index é cancelado e aparece na frente. (Ao comentar -webkit-transform, o z-index está funcionando corretamente no código abaixo)

.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.

Como a transformação e o z-index trabalham juntos?

Vamos percorrer o que está ocorrendo. Para começar, observe que o z-index nos elementos posicionados e a transform por si só criam novos ” contextos de empilhamento ” nos elementos. Aqui está o que está acontecendo:

Seu elemento .test tem o conjunto de transform para algo diferente de nenhum, o que fornece seu próprio contexto de empilhamento.

Em seguida, você adiciona um .test:after pseudoelemento, que é filho de .test . Este filho possui z-index: -1 , configurando o nível de pilha de .test:after dentro do contexto de empilhamento de .test Definindo z-index: -1 em .test:after não o coloca atrás de .test porque somente z-index tem significado dentro de um determinado contexto de empilhamento.

Quando você remove -webkit-transform de .test ele remove seu contexto de empilhamento, fazendo com que .test e .test:after compartilhem um contexto de empilhamento (o de ) e tornem .test:after passarem por .test . Note que depois de remover a .test -webkit-transform você pode, mais uma vez, dar o seu próprio contexto de empilhamento definindo uma nova regra de z-index (qualquer valor) em .test (novamente, porque está posicionado)!

Então, como resolvemos o seu problema?

Para obter o z-index funcionando da maneira esperada, certifique-se de que .test e .test:after compartilhem o mesmo contexto de empilhamento. O problema é que você deseja que o .test girado com a transformação, mas para isso significa criar seu próprio contexto de empilhamento. Felizmente, colocar o .test em um contêiner de empacotamento e rotação que ainda permitirá que seus filhos compartilhem um contexto de empilhamento enquanto também rotacionam ambos.

  • Aqui está o que você começou: http://jsfiddle.net/fH64Q/

  • E aqui está uma maneira de contornar os contextos de empilhamento e manter a rotação (note que a sombra fica um pouco cortada devido ao fundo branco do .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.

Eu estava enfrentando o problema similar. O que eu fiz foi, eu adicionei um wrapper div ao redor do teste e dei a propriedade transform para o wrapper div.

 .wrapper{ transform: rotate(10deg); } 

aqui está o violino http://jsfiddle.net/KmnF2/16/