CSS变换元素是否具有默认z-index？ [英] Do CSS transformed elements have default z-index?

问题描述

我有一个很基本的例子，我有一个固定的标题与其他元素，一个接一个堆叠，单个元素转换使用 transform：rotate（360deg）。

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

因此，只有当页面滚动时，转换元素覆盖固定栏，其他元素不滚动。所以问题是转换元素是否默认 z-index ？

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?

对于 .transform_me 使用 z-index：-1; 它表现正常

演示

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;
}

注意：对于固定的
div，说 z-index：999; ，但这不是正在寻找。

Note: It will be solved if we use say z-index: 999; for the fixed div, but that's not what am looking for.

推荐答案

对于布局受CSS框模型控制的元素，除 none c c 会导致创建堆叠上下文和包含块。对象充当固定定位后代的包含块。

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.

从规范。

堆叠上下文 。

这篇关于CSS变换元素是否具有默认z-index？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！