CSS | Position
2022-01-21
整理 CSS Position 的使用說明，藉由 Relative, Absolute, Fixed 可以達成圖層位移、堆疊的視覺效果，也可以設置懸浮固定的 sidebar 以及回到置頂的 button，藉由 sticky 則可以實作捲動跟隨著 header。
Position
- Static
- 預設的位置類別，不受 top, left , right , bottom 以及 z-index 的影響。
- Relative
- 可以相對於元素的 Static 位置進行位移。
- Absolute
- 元素會被移出 Flow，不佔據任何空間，Absolute 會尋找最近非 Static 的父元素 (Relatvie, Absolute, Fixed, Sticky) 並以父元素的左上角為基準點，進行位移。
- Fixed
- 元素會被移出 Flow，並以整個 ViewPort 的左上角作為基準點，不隨著螢幕捲動而改變，會固定在螢幕的一隅。
- Sticky
- 元素會保持原本的 Flow，但根據設定的位移，會保持在父元素捲動範圍內附著在固定的位置，例如 Sticky Header 的效果。
Div 堆疊效果
利用 Relative 或者 Absolute 來達成，如果要使用 Absolute 記得要為父元素安排一個非 Static Position。
Position Source Code | css.sdwh
Sticky Header
<div>
<div class="sticky">I'm Sticky..</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo,
iste consectetur reiciendis recusandae maiores saepe
officiis commodi odio harum magnam assumenda
itaque dolore quam, magni ullam deserunt quis! Nobis, tenetur!
</div>.sticky {
position: sticky;
top: 0px;
background-color: yellow;
}