IT工程師數位筆記本

前面的話

  變形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的位置。如果某個父級元素設置為寬度100%，則fixed將保持在原來位置不會改變

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>