質問: transform(rotate)を設定すると、z-indexがキャンセルされます。 変換プロパティを使用すると、z-indexはキャンセルされ、前面に表示されます。 (-webkit-transformをコメントアウトすると、z-indexは以下のコードで適切に機能します) .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; } <html> <head> <title>transform</title> <link rel="stylesheet" type="text/css" href="transformtest.css"> </head> <body> <div class="test">z-index is canceled.</div> </body> </html> 変換とz-indexはどのように連携しますか?
回答: 兄弟がtransform: translate() 'dおよびz-indexは機能しません。最も簡単な解決策は、position: relativeすべての兄弟、次にz-indexは再び機能します。