z-індекс скасовується шляхом встановлення перетворення (обертання)

Question 1

Використовуючи властивість transform, z-індекс скасовується та з'являється спереду. (Коли ви коментуєте -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-індекс працюють разом?

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«s -webkit-transformправил Ви можете ще раз дати йому свій власний контекст стек, встановивши нове z-indexправило (будь-яке значення) .test(знову ж , тому що він розташований)!

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

Щоб з-індекс працював так, як ви очікували, переконайтеся, що .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>

Розгорніть фрагмент

Є й інші способи зробити це, навіть кращі способи. Я, мабуть, зробив би фон "post-it" вміщуючим елементом, а потім помістив текст всередину, що, мабуть, було б найпростішим методом і зменшило б складність того, що у вас є.

Ознайомтесь із цією статтею, щоб отримати докладнішу інформацію про 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