z-index est annulé en définissant transform (tourner)

En utilisant la propriété transform, z-index est annulé et apparaît au premier plan. (Lorsque vous commentez -webkit-transform, z-index fonctionne correctement sous le code)

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

Comment la transformation et l’index z fonctionnent-ils ensemble?

    Passons en revue ce qui se passe. Pour commencer, notez que z-index sur les éléments positionnés et transform par lui-même crée de nouveaux ” contextes d’emstackment ” sur les éléments. Voici ce qui se passe:

    Votre élément .test a un ensemble de transform pour autre chose que none, ce qui lui donne son propre contexte d’emstackment.

    Vous ajoutez ensuite un pseudo-élément .test:after , qui est un enfant de .test . Cet enfant a z-index: -1 , définissant le niveau de stack de .test:after dans le contexte d’emstackment de .test Paramètre z-index: -1 sur .test:after ne le place pas derrière .test car z-index uniquement a un sens dans un contexte d’emstackment donné.

    Lorsque vous supprimez -webkit-transform de .test il supprime son contexte d’emstackment, provoquant le partage de .test et .test:after un contexte d’emstackment (celui de ) et la création de .test:after .test . Notez qu’après avoir supprimé la règle -webkit-transform .test , vous pouvez, une fois encore, lui donner son propre contexte d’emstackment en définissant une nouvelle règle d’ z-index (n’importe quelle valeur) sur .test (encore une fois, car elle est positionnée)!

    Alors, comment pouvons-nous résoudre votre problème?

    Pour que z-index fonctionne comme vous le souhaitez, assurez-vous que .test et .test:after partagent le même contexte d’emstackment. Le problème est que vous voulez que .test pivoté avec transform, mais cela signifie créer son propre contexte d’emstackment. Heureusement, placer le .test dans un conteneur d’emballage et le faire tourner permettra toujours à ses enfants de partager un contexte d’emstackment tout en faisant pivoter les deux.

    • Voici ce que vous avez commencé avec: http://jsfiddle.net/fH64Q/

    • Et voici une façon de contourner les contextes d’emstackment et de garder la rotation (notez que l’ombre est un peu coupée à cause du fond blanc de .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.

    Je faisais face au même problème. Ce que j’ai fait, j’ai ajouté un div wrapper autour du test et donné la propriété transform à la div wrapper.

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

    voici le violon http://jsfiddle.net/KmnF2/16/