transform 各种影响

1、提升元素的z-index层级，下面这个例子会让前面的图片显示在上面，一般来说应该是后面的覆盖前面图片的

<img src="mm1" style="-ms-transform:scale(1);transform:scale(1);"><img src="mm2" style="margin-left:-60px;">

 

2、父元素设置了transform:scale(1)，子元素的fixed就失效了，退化成absolute

<p style="transform:scale(1);"><img src="mm1.jpg"style="position:fixed;" /></p>

 

3、overflow与absolute之间的限制规范内容大致是：absolute绝对定位元素，如果含有overflow不为visible的父级元素，同时，该父级元素以及到该绝对定位元素之间任何嵌套元素都没有position为非static属性的声明，则overflow对该absolute元素不起作用。absolute元素和overflow元素间，含有transform的时候，absolute会被隐藏。

.overflow { 191px; height: 191px; border: 2px solid #beceeb; overflow: hidden; }

.overflow img { position: absolute; }

.transform { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

<div class="overflow">

    <div class="transform">

        <img src="mm1.jpg" />

    </div>

</div>

 

4、限制absolutely宽度100%大小，以前，我们设置absolute元素宽度100%, 则都会参照第一个非static值的position祖先元素计算，没有就window。如果前面有设置了transform的元素，也会相对它来计算了

 

http://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/