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

Используя свойство transform, 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>

Ответы

Ответ 1

Пройдите через то, что происходит. Чтобы начать, обратите внимание, что 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/

  • И здесь вы можете обойти контексты stacking и сохранить (обратите внимание, что тень немного срезается из-за .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>

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

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

Ответ 5

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

Наиболее простым решением является установка position: relative всех братьев и сестер, тогда z-index будет работать снова.