Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Do CSS transformed elements have default z-index?

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.

like image 239
Mr. Alien Avatar asked May 08 '13 06:05

Mr. Alien


People also ask

Does transform affect Z index?

Bookmark this question.

Is there a default Z index?

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.

Is Z Index inherited CSS?

No, it isn't inherited.

What is the default Z index value in positioning elements?

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):


1 Answers

For elements whose layout is governed by the CSS box model, any value other than none for the transform 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.

like image 50
Ana Avatar answered Oct 06 '22 05:10

Ana