我们可能都知道这样一个规则,当遭遇元素margin
负值重叠的时候,如果没有static以外的position属性值的话,后面的元素是会覆盖前面的元素的。例如下面,后面的妹子覆盖了前面的妹子:
<img src="mm1"><img src="mm2" style="margin-left:-60px;">
在transform
出现之前,这个规则一直很稳健;但是,自从transform
降临,这个规则就变了。元素应用了transform
属性之后,就会变得应用了position:relative
一个尿性,原本应该被覆盖的元素会雄起,变成覆盖其他元素,修改为如下代码:
<img src="mm1" style="-ms-transform:scale(1);transform:scale(1);"><img src="mm2" style="margin-left:-60px;">
只要是支持transform元素的浏览器,包括IE9(-ms-
), 都会提高普通元素的垂直地位,使其覆盖其他元素而不是被覆盖。
我们应该都知道,position:fixed
可以让元素不跟随浏览器的滚动条滚动,而且这种跟随效果连它的兄弟们position:relative/absolute
都限制不了。但是,真是一物降一物,position:fixed
固定效果却被小小的transform
给干掉了,直接降级变成position:absolute
的蛋疼表现。
例如下面示意代码:
<p style="transform:scale(1);"><img src="mm1.jpg"style="position:fixed;" /></p>
结果,本来应该不跟着滚动条滚动的傲娇fixed
元素,变成absolute
一样的行为表现,比方说下面这个妹子,其position
属性值1000%是fixed
,但是,却大失所望跟着滚动条混了,归根结底就是父元素加了个小小的transform
属性值。
可以看到,当页面滚动时候,只有中间的妹子被滚走了:
注意,这个特性表现,目前只在Chrome浏览器/FireFox浏览器下有,IE浏览器,包括IE11, fixed
还是fixed
的表现。
以前,我们设置absolute
元素宽度100%, 则都会参照第一个非static
值的position
祖先元素计算,没有就window
. 现在,诸位,需要把transform
也考虑在内了。
结果,无论是IE9+,还是Chrome还是FireFox浏览器,所有绝对定位图片100%
宽度,都是相对设置了transform
的容器计算了,于是,上面的图片拉长到了西伯利亚;下面的图片被限制成了小胖墩。
在mac safari浏览器下,使用transform: translate3d(0,0,0)
可以避免文字在其他元素transition
或animation
时候,粗细渲染跟着变化的问题。
transform
属性还会创建层叠上下文,影响元素发生重叠时候的表现。