transform對定位元素的影響

1、溫故知新

   absolute：生成絕對定位的元素，相對於除position:static 定位以外的第一個有定位屬性的父元素進行定位，若父元素沒有定位屬性則相對於瀏覽器窗口的左上角定位，定位的元素不再占據文檔的空間。

   relative：生成相對定位的元素，相對於其正常位置進行定位,定位的元素仍然占據文檔的空間;

2、發現問題

 

   css//
     div {
            width: 150px;
            height: 150px;
            margin-left: 80px;
            background-color: #00aabb;                  

     

        }

        a {
            position: absolute;
            top: 0;
            left: 0;
            width: 70px;
            height: 70px;
            background-color: green;
        }
標簽//
<div>
    <a href=""></a>
</div>

效果圖

要是在div上面加一個transform:translate(0)后的效果圖如下：

是不是看出問題來了，對加了這個屬性后，起到了一個類似定位的作用。

那么這個屬性是類似absolute還是relative,這里我就不寫事例了，直接說出結果transform的作用類似於relative的作用，

因為其還占據了空間沒有脫離文檔流，但也僅僅是類似relative的作用， 你給其加了這個屬性的元素加定位值（top:20px;left:20px）是沒任何效果

 3、加了transform的元素改變其層疊關系。

        div {
            width: 150px;
            height: 150px;
            margin-left: 80px;
            background-color: #00aabb;
        }
        p{
            width: 150px;
            height: 150px;
            margin-top: -80px;
            background-color: gold;

<div></div>
<p></p>

　　看上面代碼知p元素會覆蓋一部分div元素。如果在div上面加一個transform屬性(如：translate(0));情況就反過來了，如下圖

3、總結

當給一個元素加上transform屬性的時候，這個元素就會具有relative的特性,所以若一個元素的父元素擁有tranform屬性，那么子元素在使用定位屬性的時候要注意。