Почему перспектива изменяет фиксированную позицию в CSS?

В примере 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 все еще могли находиться в одной и той же позиции. Возможно ли это?

ОТВЕТЫ

Ответ 1

Почему перспектива изменяет фиксированную позицию в CSS?

Поскольку perspective устанавливает содержащий блок, похожий на способ position: relative;, который указан в модуле :

Perspective

Использование этого свойства с любым значением, отличным от ни одного, устанавливает стековый контекст. Он также устанавливает содержащий блок (несколько аналогично позиции: relative), как и свойство transform.

Поскольку вы применяете перспективу к каждому div в вашем примере (и верхним, левым свойствам), каждый div создает свой собственный содержащий блок и заканчивает толкать 20px вправо и в нижнюю часть предыдущего div.