CSS 程式札記 : position 定位

本文將介紹 CSS 中的position屬性，position是用於控制網頁元素在頁面上的排列，接下來將逐一介紹position屬性的五種不同值：static, relative, absolute, fixed, 和 sticky，以及它們如何影響元素的排列。

CSS Position 的用途

在我們進行網頁排版時，經常會需要對元素進行定位，來達到特定的版面配置和設計效果，這時 CSS position 屬性就是其中的關鍵，這個屬性允許我們控制元素在網頁上的位置，從而實現各種版面的設計。

CSS Position 的類型

1. Static

static 是元素的預設值，會照原本的元素位置正常排列，並且在 static 的情況下，設定 top、 bottom、 left 、 right 和  z-index  是沒有效果的。

<div style="position: static; background-color: lightgrey;">
  我是static定位的元素。
</div>

在這個例子中，元素將出現在其正常的位置。

2. Relative

relative 是相對定位，跟 static 這個屬性很像，不同的是 relative可以設定 top、 bottom、 left 、 right 和  z-index 來控制元素的位置。

<div style="position: relative; left: 20px; top: 10px; background-color: lightblue;">
  我是relative定位的元素。
</div>

這裡的元素向右移動20像素，向下移動10像素。

3. absolute

absolute 指的是絕對定位，當元素設置為 position: absolute 時，它會根據所處位置的上層容器進行定位，而且上層容器必須設定非 static 的值，否則會直接依照整個網頁進行定位。

<div style="position: relative; background-color: lightgreen;">
  <div style="position: absolute; top: 10px; right: 10px;">
    我是absolute定位的元素。
  </div>
</div>

這裡的內層元素會相對於外層元素的右上角定位。

4. Fixed

fixed 是固定定位。當元素設置為 position: fixed 時，不論使用者如何滑動網頁，該元素都會保持在同一位置。

<div style="position: fixed; bottom: 10px; right: 10px; background-color: lightpink;">
  我是fixed定位的元素。
</div>

這個元素會固定在瀏覽器窗口的右下角。

5. Sticky

sticky 是黏貼定位，和 fixed 相似，但 sticky 要滑動到該元素的位置才會有效果，而且必須設定 top。

<div style="position: sticky; top: 0; background-color: lightcoral;">
  我是sticky定位的元素。
</div>

當你向下滾動頁面時，這個元素會像fixed定位那樣固定在頂部。

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡