利用position對物件進行定位~~，儘管我覺得position有點難控制又有點奇異但我還是要分享~~。
position 有五個屬性static、relative、absolute、fixed和sticky。
每個在網頁裡的物件預設都是position: static，沒特別被釘在某個地方。

position: relative

跟static很像，但多了相對位置的設定，當你新增top right bottom left的位置控制，他就會相對地移動。而通常會將content的部分設為position: relative，讓裡面的元件設為position: absolute去做絕對定位。

position: absolute

當一個物件被設為position: absolute ，如果他的外層是position: relative，那他就會以relative的位置做絕對位置的移動；如果他的外層沒有position: relative，那他就會以body 的左上角位置做絕對位置的移動。

position: fixed

將一個物件像是貼在螢幕上一樣，當其他物件隨頁面滾動的時候，他不會移動。

position: sticky

如果一個物件設為position: sticky，當他隨著頁面滾動到頂端時，會黏在頂端（像被fixed在頁面頂端），但往上滾動頁面他還是會回到原本的位子。

fixed 跟sticky 滿適合做為navigation bar的設定，relative 跟absolute 適合做一般排版。
下一章會介紹我比較常使用的排版語法－－Flex。

下一章 Flex

※本文章所使用之圖片皆為本人作品，內容則為本人之經驗分享