web-dev-qa-db-ja.com

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はどのように連携しますか？

csscss3z-indextransform
63
kbth

何が起こっているかを見ていきましょう。開始するには、配置された要素に_z-index_があり、transform自体が要素に新しい " stacking contexts "を作成することに注意してください。ここで何が起こっているのですか：

_.test_要素にはtransformがnone以外に設定されており、独自のスタッキングコンテキストを提供します。

次に、_.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>_

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

この記事 _z-index_とスタック順序の詳細を確認するか、または コンテキストのスタックに関するW3C CSS3の仕様 をご覧ください。

118
Lochlan

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

3
Guy

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

1
AGrush

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

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

ここにフィドルがあります http://jsfiddle.net/KmnF2/16/

0
Ankur Sahu

兄弟がtransform: translate() 'dおよびz-indexは機能しません。

最も簡単な解決策は、position: relativeすべての兄弟、次にz-indexは再び機能します。

0
seeker_of_bacon