css - CSS 转换后的元素有默认的 z-index 吗？

Question

我这里有一个非常基本的例子，我有一个固定的标题，其他元素一个接一个地堆叠，单个元素使用 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.

Answer 1

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 .