z-index отменяется установкой преобразования (поворота)

Question 1

Используя свойство transform, z-index отменяется и появляется спереди. (При комментировании out -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установлено значение, отличное от none, что дает ему собственный контекст стекирования.

Затем вы добавляете .test:afterпсевдоэлемент, который является потомком .test. У этого ребенка есть z-index: -1, установив уровень стека.test:after в контексте стекирования в.test Setting z-index: -1on .test:afterне помещает его позади, .testпотому что z-indexимеет значение только в данном контексте стекирования.

Когда вы удаляете -webkit-transformиз .testнего, удаляется его контекст наложения, вызывая .testи .test:afterразделяя контекст наложения (тот из <html>) и делая.test:after идти позади .test. Обратите внимание , что после удаления .test«s -webkit-transformправил Вы можете еще раз дать ему свой собственный контекст стэк, установив новое z-indexправило (любое значение) .test(опять же , потому что он расположен)!

Так как же решить вашу проблему?

Чтобы z-index работал так, как вы ожидаете, убедитесь в этом .testи .test:afterиспользуйте один и тот же контекст стекирования. Проблема в том, что вы хотите .testповернуть с помощью transform, но для этого нужно создать свой собственный контекст наложения. К счастью, размещение .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 в контексте наложения.

Question 3

Установите div, на котором вы хотите оставаться наверху position:relative

Question 4

Была аналогичная проблема, когда братья и сестры были transform: translate()и z-indexне работали.

Самое простое решение - установить position: relativeна всех братьев и сестер, а затем z-indexснова будет работать.

Question 5

Быстрое исправление: вы можете просто повернуть другой элемент на 0 градусов.

Question 6

Я столкнулся с аналогичной проблемой. Что я сделал, так это то, что я добавил обёртку div вокруг теста и дал свойство transform обёртке div.

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

вот скрипка http://jsfiddle.net/KmnF2/16/

Question 7

Установите div, который вы хотите оставить наверху, в положение: absolute