定位與層疊

CSS 的 position 決定元素怎麼擺，z-index 決定誰在上面。六種模式，各自獨立互動。

POSITION

.static

預設值。按照文件流排列，top/left 無效。

上方元素
目標元素
下方元素
position: static;
預設值不可偏移
POSITION

.relative

相對原本位置偏移，仍佔據原空間。

上方元素
佔位
目標元素
下方元素（不動）
position: relative;
top: 12px; left: 20px;
佔據原空間可當 absolute 參考
POSITION

.absolute

脫離文件流，相對 positioned 祖先定位。

父容器 relative
上方元素
下方元素（補上來）
目標元素
position: absolute;
top: 8px; left: 80px;
脫離文件流需要 positioned 父層
POSITION

.fixed

相對於視窗定位，滾動時不動。

區塊 A — 可捲動
區塊 B — 可捲動
區塊 C — 可捲動
區塊 D — 可捲動
區塊 E — 可捲動
↑ 頂部
position: fixed;
bottom: 24px; right: 24px;
固定視窗導覽列浮動按鈕
POSITION

.sticky

滾到指定位置就「黏住」。向下捲動試試看：

區塊 A
區塊 B
Sticky 標題top: 0
區塊 C — 繼續滾
區塊 D — 標題黏住了嗎？
區塊 E — 沒錯
區塊 F
區塊 G
position: sticky;
top: 0; z-index: 10;
表格標題側邊目錄分類標籤
LAYER

.z-index

控制重疊元素的層級，數字越大越上面。

z: 1
z: 2
.a { z-index: 1; }
.b { z-index: 2; }
橘色在上僅限 positioned

小結

  • - static：預設值，不能用 top / left / z-index
  • - relative：偏移但仍佔原本空間，常當 absolute 的參考容器
  • - absolute：脫離文件流，相對於 positioned 祖先定位
  • - fixed：固定在視窗，不隨捲動
  • - sticky：滾到指定位置就黏住
  • - z-index 只對非 static 元素有效，數字越大越上層
下一課