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

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;,这在变换模块中说明:

透视

使用除none以外的任何值的此属性都会建立堆叠上下文.它还建立了一个包含块(有点类似于position:relative),就像transform属性一样.

由于您将透视应用于示例中的每个div(以及顶部,左侧属性),因此每个div都会创建自己的包含块,并最终将20px推送到前一个div的右侧和底部.