为什么透视改变了CSS的固定位置？ [英] Why does perspective changes fixed position in CSS?

问题描述

在 http://jsfiddle.net/sqk3k2nq/ 的示例中，元素设置为

HTML： p $ p> < DIV>
< span>这是A< / span>
< div>
< span>这是B< / span>
< div>
< span>这是C< / span>
< / div>
< / div>
< / div>


CSS：

  div {
 border：1px纯红色; 
位置：固定; 
 top：20px; 
 left：20px; 
} 
  

但是，如果我们添加 perspective：1000px; / code>到 div ，仓位看起来像相对，而不是固定。请参阅 http://jsfiddle.net/sqk3k2nq/1/

为什么设置透视图将它改为相对？

对于某些原因，我必须设置透视，并且我希望 A ， B 和 C 仍然可以处于相同的位置。是否有可能？

解决方案

为什么透视图会在CSS中固定位置？

$

因为 perspective 建立了一个类似于 position：relative ; does，它在转换模块
$ b

透视

使用这个属性的值不是none，就建立一个
的堆栈上下文。它也建立了一个包含块（与位置：relative相似的
），就像transform属性一样。

从你对你的例子中的每个div应用一个透视图（以及顶部，左侧属性），每个div创建自己的包含块，并最终将20px推到前一个div的右侧和底部。

In the example of http://jsfiddle.net/sqk3k2nq/ , the elements are set to be fixed at the same position.

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

However, if we add perspective: 1000px; to div, the position will look like relative instead of fixed. See http://jsfiddle.net/sqk3k2nq/1/

Why setting perspective changes it to be relative?
For some reason, I have to set perspective to it and I wish A, B, and C can still be in the same position. Is it possible?

解决方案

Why does perspective changes fixed position in CSS?

Because perspective establishes a containing block similar to the way position: relative; does, which is stated in the transform module:

Perspective

The use of this property with any value other than none establishes a stacking context. It also establishes a containing block (somewhat similar to position: relative), just like the transform property does.

Since you're applying a perspective to every div in your example (and top, left properties) each div creates its own containing block and ends up pushed 20px to the right and bottom of the previous div.

这篇关于为什么透视改变了CSS的固定位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！