在 CSS 中，position 屬性決定了 HTML 元素在頁面上的定位方式，本文將介紹 position 屬性的 5 種值，以及它們的應用場景。
static（靜態定位，預設值）
這是所有 HTML 元素的預設定位方式，元素會按照在 HTML 文件中的順序，依次排列在頁面上。此時，不能使用 top、left、right、bottom 等定位屬性。
.box {
position: static;
top: 20px; /* 不會生效 */
}
relative（相對定位）
元素仍然保持原本的位置，但可以透過top、left、right、bottom 進行「相對於自己原本位置」的偏移。當你希望某個元素微調位置，而不影響其他元素時，可以使用 relative。.box {
position: relative;
top: 10px; /* 向下移動 10px */
left: 20px; /* 向右移動 20px */
}
absolute（絕對定位）
元素會根據相對於最近的已定位的父元素來定位。通常用於建立絕對位置的元素，例如對話框、浮動按鈕等。
.container {
position: relative;
}
.box {
position: absolute;
top: 50px;
right: 20px;
}
fixed（固定定位）
元素會相對於瀏覽器視窗進行定位，無論頁面如何滾動，元素都會保持在固定位置。通常會用於固定導航欄、回到頂部按鈕等。
/* .box 固定在視窗的右下角，距離底部和右側各 10px。 */
.box {
position: fixed;
bottom: 10px;
right: 10px;
}
sticky（黏性定位）
sticky 介於 relative 和 fixed 之間，當元素滾動到指定位置時，會變成 fixed，否則維持 relative。
.box {
position: sticky;
top: 0;
}
z-index 屬性
z-index 是用來決定定位元素（不包括 static）在頁面上的前後順序。數字越大，該元素就會顯示在其他數字較小的元素上。
/* .box1 的堆疊順序高於 .box2，會覆蓋在 .box2 之上。 */
.box1 {
position: absolute;
z-index: 2;
}
.box2 {
position: absolute;
z-index: 1;
}
結語
無論是相對定位、絕對定位，還是固定定位與黏性定位，每種定位方式都有適合的應用場景。了解這些定位屬性，可以幫助你設計出更具吸引力和功能性的網頁。