transform 各類影響

一、提高元素的z-index層級，下面這個例子會讓前面的圖片顯示在上面，通常來講應該是後面的覆蓋前面圖片的

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

 

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

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

 

三、overflow與absolute之間的限制規範內容大體是：absolute絕對定位元素，若是含有overflow不爲visible的父級元素，同時，該父級元素以及到該絕對定位元素之間任何嵌套元素都沒有position爲非static屬性的聲明，則overflow對該absolute元素不起做用。absolute元素和overflow元素間，含有transform的時候，absolute會被隱藏。

.overflow { width: 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>

 

四、限制absolutely寬度100%大小，之前，咱們設置absolute元素寬度100%, 則都會參照第一個非static值的position祖先元素計算，沒有就window。若是前面有設置了transform的元素，也會相對它來計算了

 

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