Question

在http://jsfiddle.net/sqk3k2nq/的示例中，元素在同一位置设置为fixed。

HTML：

<div>
    <span>This is A</span>
    <div>
        <span>This is B</span>
        <div>
            <span>This is C</span>
        </div>
    </div>
</div>

CSS：

div {
    border: 1px solid red;
    position: fixed;
    top: 20px;
    left: 20px;
}

但是，如果我们将perspective: 1000px;添加到div，则该位置将显示为relative而非fixed。见http://jsfiddle.net/sqk3k2nq/1/

为什么设置perspective会将其更改为relative？出于某种原因，我必须设置perspective，我希望A，B和C仍然可以处于同一位置。有可能吗？

Answer 1

为什么透视会改变CSS中的固定位置？

因为perspective建立了与position: relative;类似的包含块，这在transform module中有说明：

<强>视角

使用除none以外的任何值的此属性都会建立a   堆叠上下文。它还建立了一个包含块（有点   类似于position：relative），就像transform属性一样。

由于您将示例应用于视图中的每个div（以及顶部，左侧属性），因此每个div都会创建自己的包含块，最后将20px推到前一个div的右侧和底部。

为什么透视会改变CSS中的固定位置？

1 个答案: