I've a pretty basic example here, am having a fixed header with other elements which are stacked one after another, single element is transformed using transform: rotate(360deg)
.
So only the transformed element is getting over the fixed bar when the page is scrolled, where other elements doesn't. So the question is do transformed elements have default z-index
?
When you use
z-index: -1;
for.transform_me
it behaves normal
CSS
.fixed {
height: 30px;
background: #f00;
position: fixed;
width: 100%;
top: 0;
}
.transform_me {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
span {
display: block;
height: 100px;
}
Note: It will be solved if we use say
z-index: 999;
for the fixed div, but that's not what am looking for.
For elements whose layout is governed by the CSS box model, any value other than
none
for thetransform
results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.
From the specification.
来源:https://stackoverflow.com/questions/16433864/do-css-transformed-elements-have-default-z-index