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