CSS变换元素是否具有默认的z-index?

前端之家收集整理的这篇文章主要介绍了CSS变换元素是否具有默认的z-index?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个很基本的例子,我有一个固定的标题与其他元素相互堆叠,单个元素是转换使用transform:rotate(360deg).

因此,只有当页面滚动时,已转换的元素才能越过固定栏,其他元素则不会.那么问题是转化元素是否具有默认的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.

解决方法

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.

specification.

Stacking context.

猜你在找的CSS相关文章