Почему перспектива изменяет фиксированную позицию в 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.
