CSS 转换的元素是否具有默认的 z-index？答案

【问题标题】：Do CSS transformed elements have default z-index?CSS 转换的元素是否具有默认的 z-index？
【发布时间】：2013-05-08 06:14:16
【问题描述】：

我在这里有一个非常基本的示例，我有一个固定的标题，其中包含一个接一个堆叠的其他元素，单个元素使用transform: rotate(360deg) 进行转换。

因此，当页面滚动时，只有转换后的元素会越过固定栏，而其他元素则不会。所以问题是转换后的元素有默认的z-index吗？

当您将z-index: -1; 用于.transform_me 时，它的行为正常

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

注意：如果我们使用say z-index: 999; 来解决固定问题 div，但这不是我要找的。p>

【问题讨论】：

z-index 包括 1 的任何正值都可以解决它，但正如你所说，它似乎有自己的层，但它小于 z-index:1 ？ +1
@JEES 我不知道，这很有趣，我的意思是如果我有许多转换的元素，我必须为每个更改 z-index，我想知道为什么会发生这种情况跨度>
这将是一团糟，在来自歌剧的This Link 中它说 -请注意，转换不会影响文档的流动，所以如果元素被移动到另一个元素已经定位，它将与该元素重叠，而不是在其周围或下方流动的内容。文档后面的元素也不会占用转换后的元素腾出的空间-
@JEES 感谢来源..

标签： css z-index css-transforms

【解决方案1】：

对于布局受 CSS 框模型控制的元素，transform 的除 none 之外的任何值都会导致同时创建堆叠上下文和包含块。该对象充当固定定位后代的包含块。

来自specification。

Stacking context.

【讨论】：

我应该对所有转换后的元素使用z-index: -1;吗？
我只想给.fixed 一个肯定的z-index。