[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. 非不得已不要用,這等同於強制覆蓋住所有其他的元素及畫面。  

Continue reading