1 需求

---

2 語法

在CSS中，positioning?和?transform?是兩個非常重要的概念，它們分別用于控制元素在頁面上的布局和變換。

Positioning

CSS中的position屬性用于設置元素的定位類型。它有幾個值，包括：

• static：這是默認值，元素按照正常的文檔流進行定位。
• relative：元素相對于其正常位置進行定位。因此，"left: 20px" 會將元素向右移動20px。
• absolute：元素相對于最近的已定位祖先（即設置了position屬性為relative、absolute、fixed或sticky的元素）進行定位。如果沒有已定位的祖先元素，那么它會相對于初始包含塊進行定位。
• fixed：元素相對于瀏覽器窗口進行定位，即使頁面滾動，它也會始終停留在同一的位置。
• sticky：元素根據正常文檔流進行定位，然后相對于用戶的滾動位置在視口內粘附（固定）在指定的偏移位置。

Transform

transform屬性允許你對元素進行2D或3D轉換。這些轉換可以包括旋轉、縮放、傾斜和移動。

• rotate()：圍繞一個點旋轉元素。
• scale()：改變元素的大小。
• skew()：傾斜元素。
• translate()：移動元素。

例如，你可以使用transform: rotate(45deg);來旋轉一個元素45度，或者使用transform: scale(2);來放大元素兩倍。

結合使用

雖然positioning和transform是兩個不同的概念，但你可以在一個元素上同時使用它們。例如，你可能想要將一個元素定位到頁面的某個位置，然后對其進行旋轉或縮放。

css.my-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}

在這個例子中，.my-element首先被絕對定位到其父元素的中心（使用top: 50%;和left: 50%;），然后使用transform: translate(-50%, -50%);將其自身的中心移動到頁面的中心。最后，它被旋轉了45度。

---

3 示例

---

4 參考資料