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
Demo
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.
Bookmark this question.
The Default z-index Value of HTML Elements The default z-index value of all the elements on a web page is auto, which corresponds to 0 where no z-index is assigned. An element with z-index: -1 will be displayed behind all other elements on the page, assuming they are given no z-index values.
No, it isn't inherited.
The default value when positioned is z-index: auto which is similar to z-index: 0 . If you had multiple positioned elements with z-index: auto or z-index: 0 they would be stacked according to the (W3C CSS2 specification on stacking context):
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.
Stacking context.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With