位置

什麼是 Position ？
用於控制元素在 DOM 中的位置。

Position 特性

• static
• fixed
• absolute
• relative
• sticky

密不可分的 relative （相對定位）與 absolute（絕對定位）

為什麼會說 relative 與 absolute 密不可分呢？

1. 使用 absolute 定位時，元素本身會失去空間，大小僅剩元素本身。
2. 被 absolute 定位的元素位置取決外層 relative。

舉個例子，這裡有一段 HTML。

<div class="relative w-[100px] h-[100px] bg-blue-700 mx-auto">
  <div class="absolute top-0 left-0 w-[50px] h-[50px] bg-yellow-300"></div>
</div>

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

absolute 外層有 relative，內層黃色方塊會定位在外層藍色方塊內，黃色方塊會在藍色方塊裡面的哪個位置就要看 top / left / bottom / right 的數值，以上面為例， top-0 、 left-0 ，所以黃色方塊會緊貼在藍色方塊的左上方。

當外層沒有 relative，來看看有什麼不同。

<div class="absolute top-0 left-0 w-[50px] h-[50px] bg-yellow-300"></div>

當定位的元素外層沒有 relative 時，會一直向外找，以上面為例，外層現在是 body，黃色方塊就會在整個網頁的左上方。

接著我們來介紹定位中最常使用的 - 將元素定位在中間。
首先我們先來看看容易犯的錯誤：

<div class="relative w-[100px] h-[100px] bg-blue-700 mx-auto">
  <div class="... absolute top-1/2 left-1/2"></div>
</div>

.top-1\/2 {
  top: 50%;
}

.left-1\/2 {
  left: 50%;
}

此時黃色方塊並沒有位於藍色方塊的正中間，明明 top 及 left 都給50%，為什麼呢？
因為我們需要扣掉元素自身的寬高，讓我們再將程式碼改寫一下。

<div class="relative w-[100px] h-[100px] bg-blue-700 mx-auto">
  <div class="... absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
</div>

.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

可以看到加上 -translate-x-1/2 、 -translate-y-1/2 將元素本身寬高扣除就會正常。

fixed

與 absolute 相似，定位時會失去空間，且定位依據不同，fixed 會以網頁視窗為主。

<div class="fixed top-4 right-4 w-[50px] h-[50px] bg-red-300"></div>

.fixed {
  position: fixed;
}

sticky

與 fixed 相似，但需要滾動超過指定的值，才有固定的效果。

<div class="sticky top-8 w-[50px] h-[50px] bg-green-300"></div>

.sticky {
  position: sticky;
}

若 sticky 外層有 overflow: hidden，sticky 固定效果會失效。

<div class="overflow-hidden">
  <div class="sticky top-8 w-[50px] h-[50px] bg-green-300"></div>
</div>

.overflow-hidden {
  overflow: hidden;
}

codepen 連結

本日重點

1. absolute 元素位置取決於 relative
2. 若將元素定位正中間，需要扣掉元素自身的寬高。
3. fixed 位置根據網頁視窗。
4. sticky 外層有 overflow: hidden 固定效果會失效。

參考

• Tailwind CSS - Position
• Tailwind CSS - Top / Right / Bottom / Left
• Tailwind CSS - Translate
• Tailwind CSS 官網