Question

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

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

对z-index: -1;使用.transform_me时，它表现正常

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

注意：如果我们使用说z-index: 999;来修复它，它将被解决 div，但那不是我要找的东西。

Answer 1

对于布局由CSS框模型控制的元素，none的{{1}}以外的任何值都会导致创建堆叠上下文和包含块。该对象充当固定位置后代的包含块。

来自specification。

Stacking context

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

1 个答案: