transform（rotate）を設定すると、z-indexがキャンセルされます。

Question 1

変換プロパティを使用すると、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はどのように連携しますか？

Question 2

何が起こっているのかを見ていきましょう。まず、z-index配置された要素にtransform、それ自体で要素に新しい「スタッキングコンテキスト」を作成することに注意してください。何が起こっているのか：

あなたの.test要素がいるtransformそれを独自のスタッキングコンテキストを与えるなし、以外に設定します。

次に.test:after、の子である疑似要素を追加し.testます。この子はz-index: -1、[設定]のスタック.test:after コンテキスト内.testのスタックレベルを設定z-index: -1し.test:afterても、特定のスタッキングコンテキスト内でのみ意味がある.testため、それを後ろに配置しませんz-index。

あなたは削除する場合-webkit-transformから.test、それ引き起こし、そのスタッキングコンテキストを削除.testし、.test:afterスタッキングコンテキスト（のそれを共有する<html>）となって.test:after行くの後ろに.test。.testの-webkit-transformルールを削除した後、新しいz-indexルール（任意の値）を.test（再び配置されているため）に設定することで、もう一度、独自のスタッキングコンテキストを与えることができることに注意してください！

では、どのように問題を解決しますか？

z-indexを期待どおりに機能させるには、それを確認し、同じスタッキングコンテキスト.testを.test:after共有します。問題は、.test変換で回転させたいということですが、そうすることは、独自のスタッキングコンテキストを作成することを意味します。幸いなこと.testに、ラッピングコンテナに入れて回転させると、子がスタッキングコンテキストを共有しながら、両方を回転させることができます。

これがあなたが始めたものです：http：//jsfiddle.net/fH64Q/
そして、これがスタッキングコンテキストを回避して回転を維持する方法です（.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;
}

<div class="wrapper">
    <div class="test">z-index is canceled.</div>
</div>

スニペットを展開

これを行う方法は他にもありますが、もっと良い方法もあります。私はおそらく「ポストイット」の背景を含む要素にしてからテキストを中に入れます。これはおそらく最も簡単な方法であり、あなたが持っているものの複雑さを軽減するでしょう。

スタッキングの順序とスタッキングのコンテキストに関するW3CCSS3仕様の詳細については、この記事を確認してください。z-index

Question 3

トップに留まりたいdivをに設定します position:relative

Question 4

兄弟がtransform: translate()'dされていて、機能しないという同様の問題z-indexがありました。

最も簡単な解決策はposition: relative、すべての兄弟に設定してから、z-index再び機能することです。

Question 5

クイックフィックス：他の要素を0度回転させることもできます。

Question 6

私も同様の問題に直面していました。私がしたことは、テストの周りにラッパーdivを追加し、ラッパーdivにtransformプロパティを指定したことです。

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

これがフィドルですhttp://jsfiddle.net/KmnF2/16/

Question 7

一番上に置きたいdivをposition：absoluteに設定します