transform带来的影响

我们在使用定位时,常常使用 fixed 来对视口做相对定位。但今天,我遇到了一个问题,fixed 居然定位不准,表现为 absolute; 找了半天原因,结果是:

当元素祖先的 transform 属性非 none 时,容器由视口改为该祖先

fixed

Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page. This value always create a new stacking context. When an ancestor has the transform property set to something different than none then this ancestor is used as container instead of the viewport (see CSS Transforms Spec).

这个在标准文档里写的清清楚楚,但就是没认真看多。值得反思。

上次在面到这个问题的时候,没有想过其他的问题。然而无意间看到了大神的文章: http://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/ 。才让我想到去思考下还会不会有其他影响。