絕對定位的圖片

一、HTML給圖片絕對定位

在HTML中，我們可以給一張圖片添加絕對定位來使其脫離文檔流，從而可以在頁面上自由移動。下面我們來看一個簡單的示例：

<div class="wrapper">
  <h2>這是一個標題</h2>
  <img src="img1.jpg" class="positioned" alt="">
  <p>這是一個段落</p>
</div>

我們在一個div元素內部插入了一個圖片和一個段落，同時設定wrapper類的position屬性值為relative。圖片的class屬性為positioned，接下來給圖片添加以下CSS樣式：

.positioned {
  position: absolute;
  top: 50px;
  left: 50px;
}

這將讓圖片從其父元素的坐標系中脫離，相對於文檔的左上角定位，從該點偏移50像素的左上角繼續顯示。

當然，還有其他屬性可以控制絕對定位元素，例如right和bottom。right：50px；則是將元素向右移動50像素

二、CSS圖片絕對定位

在CSS中，我們可以使用絕對定位來控制圖片的位置和大小。下面我們來看一個示例：

<div class="wrapper">
  <h2>這是一個標題</h2>
  <img src="img1.jpg" class="positioned" alt="">
  <p>這是一個段落</p>
</div>

同樣的，我們用CSS來設置圖片的樣式，如下所示：

.positioned {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
}

這將讓圖片絕對定位，並使其垂直和水平中心在父元素的中心。接下來，我們使用 translate() 函數將它們返回到它們的正確位置。它的 width 更改為 200 像素是因為它太大了，我們需要它更小些

三、CSS圖片絕對定位的特殊效果

使用絕對的定位還可以實現複雜的效果，例如拼圖遊戲中的有序變換。下面我們來看一個簡單的示例：

<div class="wrapper">
  <h2>這是一個標題</h2>
  <img src="img1.jpg" class="positioned" alt="">
  <p>這是一個段落</p>
</div>

接下來我們來添加CSS樣式，初始狀態左上角是0，0：如下

.positioned {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  transition: all 1s ease;
}

這樣在後續的操作中就會使用到 transition 這個屬性了。然後，我們可以通過類似以下的方式操作來將圖片移到它的新位置：

.changed {
  transform: translateX(50%) rotate(-45deg);
  left: 50%;
  top: 100px;
}

然後就可以玩出豐富的效果了。實現過程就是把圖片在前後兩個位置中間加一個中間狀態：

.initial {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
}

.middle {
  transform: translateX(50%) rotate(-45deg);
  left: 50%;
  top: 100px;
  transition: all 1s ease;
}

.final {
  transform: translateY(200%) rotate(180deg);
  left: 80%;
  top: 0;
  transition: all 1s ease;
}

我們假設需要拼成的圖形為直角三角形向右傾斜，然後我們可以在中間的效果中進行旋轉、偏移和變形。它將在1秒的時間內不間斷地從初始狀態到中間狀態，然後是最終狀態。同時謹記，transition屬性可以使變化更平緩，過度的效果更自然

總的來說，絕對定位的圖片在網頁的設計中有着非常重要的地位。它可以實現對於圖片在頁面布局中的自由設計，同時也可以做到一些比較炫酷的特效。所以，前端程序員在設計頁面的時候，絕對定位的圖片是避免不了的。