Position

參考資料:關於 position 屬性(http://zh-tw.learnlayout.com/position.html)

參考資料:(https://blog.camel2243.com/2016/11/16/css-position-%E5%B1%AC%E6%80%A7relative%E3%80%81absolute%E3%80%81static-%E5%8F%8A-fixed-%E8%A7%A3%E6%9E%90/)

此屬性的值

static

預設值，不會被特別定位，由瀏覽器預設的配置自動排版在頁面上。

relative

relative 表現的和 static 一樣，除非你增加了一些額外的屬性。 例如 top 、 right 、 bottom 和 left 屬性，會使其元素「相對地」調整其原本該出現的所在位置，而不管這些「相對定位」過的元素如何在頁面上移動位置或增加了多少空間，都不會影響到原本其他元素所在的位置。

fixed

固定定位（position: fixed）的元素會相對於瀏覽器視窗來定位，這意味著即便頁面捲動，它還是會固定在相同的位置。和 relative 一樣，我們會使用 top 、 right 、 bottom 和 left 屬性來定位。

固定定位元素不會保留它原本在頁面應有的空間，不會跟其他元素的配置互相干擾。

absolute

absolute 應該是最弔詭的 position 屬性值。absolute 與 fixed 的行為很像，不一樣的地方在於 absolute 元素的定位是在他所處上層容器的相對位置。如果這個套用 position: absolute 的元素，其上層容器並沒有「可以被定位」的元素的話，那麼這個元素的定位就是相對於該網頁所有內容（也就是 元素）最左上角的絕對位置，看起來就是這張網頁的絕對位置一樣，所以當你的畫面在捲動時，該元素還是會隨著頁面捲動。請記得，只有套用 position: static 的元素屬於「不會被特別定位」的元素，套用 static 以外的屬性值都算是「可以被定位」的元素。