Z-индекс отменяется установкой transform (rotate)

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

как transform и z-index работают вместе?

41
css css3 transform z-index

3 ответов

давайте пройдемся по тому, что происходит. Для начала, обратите внимание, что z-index на позиционируемых элементах и transform сам по себе создать новый"укладка контекстах" на элементы. Вот что происходит:

код .test элемент transform установите что-то отличное от none, что дает ему собственный контекст укладки.

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

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

Итак, как мы решим вашу проблему?

чтобы z-индекс работал так, как вы ожидаете, убедитесь, что .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>

есть и другие способы чтобы сделать это, даже лучше. Вероятно, я бы сделал фон "post-it" содержащим элементом, а затем поместил текст внутрь, что, вероятно, было бы самым простым методом и уменьшило бы сложность того, что у вас есть.

проверить в этой статье подробнее о z-index и штабелируя заказ, или рабочая спецификация W3C CSS3 по контексту укладки

92

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

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

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

0

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

0