transform对普通元素的渲染影响

transform对普通元素的渲染影响

1、transform改变overflow对absolute元素的限制

absolute绝对定位元素，如果含有overflow不为visible的父类元素，同时该父级元素以及到该绝对定位元素之间任何嵌套元素都没有position为非static的属性，则overflow对该absolute元素不起作用。”

例如下面的代码：

<p style="width:200px;height:300px;overflow:hidden;">
	<img src="images/1.jpg" alt="" style="position:absolute">
</p>

overflow对img元素不起作用，展示结果如下：

但是如果在父元素（或者它们之间嵌套的元素）中设置:transform:scale(1);或tranform:translate（0,0）；则能够使overflow发挥作用，增加transform后显示结果如下：

2、transform限制absolute的100%宽度大小

当我们设置absolute元素的宽度为100%时，都要参照第一个position为非static的元素，但是现在设置了transform的元素也要被认为是position设置为非static的元素了。看下面的代码：
div没有设置transoform之前：

<div style="width:300px;height:300px;overflow:hidden;">
	<img src="images/1.jpg" alt="" style="position:absolute" width="100%">
</div>

显示结果如下：

div设置transform之后的显示结果如下：

3、transform可以改变元素的叠加顺序

负值margin可以使后面的元素覆盖掉前面的元素（前面的元素没有设置position为非static的值），代码如下：

<span style="font-size:10px;font-weight: normal;"><div style=" width:700px;height:400px;overflow:hidden;">
	<img src="images/1.jpg" alt="" style="" width="250px" height="300px">
	<img style="margin-left:-90px" src="images/p1.jpg" alt="" width="300px" height="300px">
</div></span>

显示结果如下：

但是如果给被覆盖的元素增加position:relative或者transform样式,元素的覆盖顺序正好相反了，显示结果如下：

可以说transform使得元素具有pisition:relative的特性了。

4、transform会影响position:fixed元素的滚动效果。

当给元素设置position:fixed时元素不会随着窗口滚动，但是如果给元素的父级元素（注意不是给元素本身设置）transform属性，那么元素便会随着窗口的滚动而滚动。