Используя свойство 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?
Ответы:
Давайте пройдемся по тому, что происходит. Для начала обратите внимание, что
z-index
для позиционированных элементов иtransform
самих по себе создавать новые « контексты наложения» » на элементы. Вот что происходит:Для вашего
.test
элементаtransform
установлено значение, отличное от none, что дает ему собственный контекст стекирования.Затем вы добавляете
.test:after
псевдоэлемент, который является потомком.test
. У этого ребенка естьz-index: -1
, установив уровень стека.test:after
в контексте стекирования в.test
Settingz-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-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 в контексте наложения.источник
Установите div, на котором вы хотите оставаться наверху
position:relative
источник
Была аналогичная проблема, когда братья и сестры были
transform: translate()
иz-index
не работали.Самое простое решение - установить
position: relative
на всех братьев и сестер, а затемz-index
снова будет работать.источник
Быстрое исправление: вы можете просто повернуть другой элемент на 0 градусов.
источник
transform:rotate(0.0rad)
исправило ее. Я не мог применить его через правило css, он должен был быть прямо на элементе. В этом нет смысла, но спасибо за ответ, который заставил меня попробовать.Я столкнулся с аналогичной проблемой. Что я сделал, так это то, что я добавил обёртку div вокруг теста и дал свойство transform обёртке div.
.wrapper{ transform: rotate(10deg); }
вот скрипка http://jsfiddle.net/KmnF2/16/
источник
Установите div, который вы хотите оставить наверху, в положение: absolute
источник