在 CSS 版面排版中，position 屬性扮演著至關重要的角色，它決定了元素在網頁上的定位方式。不同於 background 著重於元素的背景裝飾，position 專注於精確控制元素的位置，讓我們能夠打破文件流的限制，創建出更複雜、更具互動性的版面配置。熟悉 position 的各種屬性值，例如 static、relative、absolute、fixed 和sticky

position 的主要屬性值

position 屬性可以設定多種值，每種值都會讓元素有不同的定位行為。一旦設定了 static 以外的定位值，就可以使用 top、right、bottom、left 這四個屬性來精確調整元素的位置。

1.static (預設值):

元素會依照常規流進行排列，設定 top、right、bottom、left 和 z-index 屬性都不會產生任何效果。

2.relative (相對定位):

元素的位置會相對於其在常規流中的「原始位置」進行偏移。它原本佔據的空間會被保留，不會影響其他元素的佈局。這是使用 absolute 定位時，最常用來參考的父層元素定位方式。
範例:
.relative-box {
position: relative;
top: 20px;
left: 30px;
}

3.absolute (絕對定位):

元素脫離常規流，元素原本所在的位置會移除，top、right、bottom、left是相對於最近的非static父元件來指定距離
範例:
.parent {
position: relative; /* 作為子元素的定位參考點 */
}
.absolute-box {
position: absolute;
top: 0;
right: 0;
}

4.fixed (固定定位):

與 absolute 類似，fixed 也會讓元素脫離常規流，但它的定位是相對於「瀏覽器的可視範圍 (viewport)」，這意味著即使頁面滾動，該元素也會固定在螢幕上的同一個位置，常用於製作固定的導覽列或頁尾。
範例:
.fixed-header {
position: fixed;
top: 0;
width: 100%;
background-color: #fff;
}

5.sticky (黏滯定位):

這是 relative 和 fixed 的混合體。元素在滾動到特定位置之前，表現為相對定位且當頁面滾動超過觸發點時，它就會變為固定定位，黏在指定的位置。這個屬性非常適合製作滾動時能固定的側邊欄或標題。
範例
.sticky-sidebar {
position: sticky;
top: 10px; /* 當滾動到距離頂部10px時觸發固定 */
}

圖片網址:CSS POSITION PROPERTY