[快速入門前端 29] Position 定位：絕對定位、相對定位、固定定位、黏性定位

css 前端新手村絕對定位相對定位

Doris 2023-06-14 14:45:20 ‧ 1825 瀏覽

分享至

Position 定位

Position (定位) 是指元素在頁面上的位置。在一般情況下，我們寫好的元素會由左至右、由上至下依序在瀏覽器中排列，不過當網頁變的愈加複雜，我們就必須使用不同的定位方法進行排版，這邊文章就是要來介紹 position 屬性可以做到哪些定位方法。

Static 預設

Static 是 HTML 預設的定位方式，即沒有特別定位，元素會由左至右、由上而下依序顯示，且不受 top、bottom、left、right 等定位屬性的影響。

語法：

position: static; /* 預設，不定位 */
position: relative; /* 相對定位 */
position: absolute; /* 絕對定位 */
position: fixed; /* 固定定位 */
position: sticky; /* 黏性定位 */

Relative 相對定位

Relative (相對定位) 是指針對元素原本應該在的為基準 (參考點)，配合 top、bottom、left、right 四個屬性做位移，例如 top: 10px 為 相對於原本的位置，距離 top 10px，也就是說相對於原本應該在的位置下移 10px。

Relative 的特點：

參考點為該元素原本的位置
位移只對該元素作用，原本的空間不會改變，不影響周圍元素的位置
left 和 right 不能同時設定、top 和 bottom 不能同時設定
相對定位可以和浮動同時使用 (不推薦)

範例：

Absolute 絕對定位

Absolute (絕對定位) 會以距離該元素最近的已定位 ( 擁有 position 屬性的元素 ) 祖先元素為參考點，若無已定位祖先元素則往外找以根元素 <html> 為參考點進行位置偏移，而偏移方向和距離則一樣以上下左右四個屬性來控制。

Absolute 的特點：

參考點為最近的已定位祖先元素 ( 已定位元素是指 position 屬性不是 static 的元素)
絕對定位的元素會脫離元素原本的排列 ( 脫離布局流 Normal flow )
絕對定位不能與浮動同時設定，會造成浮動失效
不論什麼類型的元素在經過絕對定位後皆可指定寬高

範例：

絕對定位會以最近的已定位祖先元素為參考點，若無則以根元素為參考點
絕對定位脫離原本的佈局流，不佔空間
行內元素在經過絕對定位後可指定寬高

Fixed 固定定位

固定定位是以瀏覽器視窗 (view) 為參考進行位移，無論網頁是否滾動、滾動到哪都不會影響固定定位元素的位置，常見應用例如視窗右下角彈出廣告、回到最上按鈕、聯絡客服按鈕等。

Fixed 的特點：

參考點為瀏覽器可視範圍，不受頁面滾動影響元素的位置
脫離元素原本的排列 ( 脫離布局流 Normal flow )
不能與浮動同時設定，會造成浮動失效
不論什麼類型的元素在經過固定定位後皆可指定寬高

範例：
不管頁面滾度到何處，position fixed 的紅色正方形都在同樣的位置

Sticky 黏性定位

sticky 黏性定位是一種比較新的定位方法，在一般狀況下，sticky 與 relative 的表現相同，會依照佈局流排列，而當元素滾動到指定位置時元素會被固定 (fixed) 住，直到父元素脫離視窗可視範圍又變為 relative 定位。
黏性定位的參考點為「最近一個具有滾動軸的祖先元素」，也就是說當元素設定為 position: sticky; 和 top: 10px 代表 “當元素在最近一個具有滾動軸的祖先元素上邊緣 10px 時固定，直到該元素的父元素脫離視窗範圍”。

範例：
假設今天我們有幾組標題+詳細內容的頁面，當畫面滾動時無法看到該內容的標題 (如下圖看不到 1-5 是屬於哪一類)

這時候就可以使用 sticky 將標題固定在我們的可視範圍直到第一部分內容滾動完畢。

.father {
    background-color: lightblue;
    padding: 20px;
    height: 2000px;
}
.box {
    background-color: rgb(225, 225, 225);
}
.title {
    background-color: lightcoral;
    position: sticky;
    top: 0; /* 當 title 滾動至 top 0 時固定住，直到父元素 (box) 脫離視窗範圍 */
}

<div class="father">
    <div class="box">
        <div class="title">第一項</div>
        <h3>1-1</h3>
        <h3>1-2</h3>
        <h3>1-3</h3>
        <h3>1-4</h3>
        <h3>1-5</h3>
        <h3>1-6</h3>
        <h3>1-7</h3>
    </div>
    <div class="box">
        <div class="title">第二項</div>
        <h3>2-1</h3>
        <h3>2-2</h3>
        <h3>2-3</h3>
        <h3>2-4</h3>
        <h3>2-5</h3>
        <h3>2-6</h3>
        <h3>2-7</h3>
    </div>
</div>

上一篇：[快速入門前端 28] Float 浮動
下一篇：[快速入門前端 30] z-index 和定位的特殊用法
系列文章列表：[快速入門前端] 系列文章索引列表