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定位那樣固定在頂部。
😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊
