[css] position 屬性relative、absolute、static 及 fixed 解析

css 的 position 屬性,許多剛入門的人不深入了解,容易不清楚究竟是以哪個父元素做定位,造成不良的HTML編排架構。(最差的狀況就是用了一堆 fixed…..)

這篇整理幾個範例,說明每個屬性的用法。


 

  • static: 預設定位,無法定義 top、left、bottom 與 right。
  • relative: 元素與 static 位置相同,可定義 top、left、bottom 與 right。(注意: 元素實際位置還是在 static的位置,非偏移過後的位置)
  • absolute: 以上層非 static(預設定位)的父元素為定位基準。(重要: 若上層所有父元素都是預設的 static 定位,則會根據 body 定位)

    PS. 可以看到藍色區塊會以祖父元素(position: relative;)來做定位。
  • fixed: 以目前瀏覽器視窗定位,固定在瀏覽視窗的固定位置,不隨滾動捲軸拉動。
    也就是很多廣告或彈出視窗的作法。
    PS. 非不得已不要用,這等同於強制覆蓋住所有其他的元素及畫面。

 

Leave a Reply