CSS | Position


  1. Position
    1. Div 堆疊效果
    2. Sticky Header
  2. 相關傑連
  3. 參考資料

整理 CSS Position 的使用說明,藉由 Relative, Absolute, Fixed 可以達成圖層位移、堆疊的視覺效果,也可以設置懸浮固定的 sidebar 以及回到置頂的 button,藉由 sticky 則可以實作捲動跟隨著 header。

JavaScript logo

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 Demo | css.sdwh

Position Source Code | css.sdwh

<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;
}

相關傑連

Common Style Solution

參考資料

Some ways to align the last row in a flexbox grid