[1]z-index [2]fixed [3]overflow [4]定位父級 ...
前面的話
變形transform本來是一個用來處理移動、旋轉、縮放和傾斜等基本操作的CSS3屬性，但該屬性除了完成其本職工作之後，還對普通元素造成了意想不到的影響，本文將詳細介紹transform對元素造成的四個副作用
z-index
在定位中的堆疊z-index中曾經提到過，CSS3的出現對過去的很多規則發出了挑戰，對層疊上下文z-index的影響更加顯著，其中就包括元素的變形transform不是none的情況
元素的變形transform不是none使該元素可以使用堆疊z-index，從而可以覆蓋普通流元素和低級別的定位元素
在下麵例子中，show2和show1都是普通元素，show2通過設置margin負值，覆蓋了show1。但是，通過改變show1的'transform'屬性可以改變其層疊效果
fixed
固定定位fixed使元素相對於視窗進行定位，不隨著頁面滾動條的滾動而滾動。但是，如果在固定定位元素的父級設置transform不為none，則會將固定定位降級為絕對定位absolute
相容性：IE瀏覽器無此表現，依然保持fixed狀態
[註意]在chrome瀏覽器下，將固定定位元素父級的transform屬性設置為none，可能會使元素從靜態位置移動到left:0、top:0的位置
overflow
對於溢出overflow失效的情況發生在overflow在絕對定位元素及其包含塊之間，如下所示
給設置overflow的元素使用transform或在設置overflow的元素與溢出元素之間的元素設置transform，可以解決overflow失效的問題
相容性：在chrome和safari瀏覽器下，只有設置overflow的元素與溢出元素之間的元素設置transform時，才有效；而IE9+和firefox瀏覽器，對於以上兩種設置都有效
[註意]在chrome瀏覽器下，將元素的transform屬性設置為none，可能會使元素從靜態位置移動到left:0、top:0的位置
定位父級
一般地，絕對定位元素設置寬度百分比時，參照的是定位父級。定位父級是第一個position值為非static值的祖先元素。但是，如果祖先元素中存在設置了transform元素不為none的元素，也可以成為定位父級
以下為例子中的HTML結構，當.transform元素設置transform:scale(1)時，該元素成為定位父級，否則.parent元素是定位父級
<div class="parent" style="position:relative;width: 200px;height: 30px;">
<div class="transform" style="width: 80px;height: 80px;">
<div class="test" style="position:absolute;width:100%"></div>
</div>
</div>
