初學者在學習切版時都會遇到 position 定位的問題，它的屬性很多，特性也各有不同，剛開始會不知道該如何使用它，如何選擇它的屬性，今天這篇文章就來跟大家分享，平時我是在什麼樣的情境下使用它們的。
現在跟大家介紹它的五大屬性
1. position: static;
這是一個預設值，也就是你什麼都不設定，系統直接默認，它會依照瀏覽器預設自動排列，所以一般我在開發時並不會特別設定它。
⚠️ 注意: 如果屬性是static 那麼無論你怎麼設定 top、right、bottom、left 都無法改變它的位置的喔！
使用情境：通常我會需要設定這個屬性，都是為了要覆蓋之前的設定。
舉例說明:
我先設定了 .dad 底下的 div 使用 position: absolute; 去定位，可是我 .child-02 不想要讓它依照 position: absolute; 去定位 ，這時候我就會用 position: static; 去覆蓋它原本設定的屬性。( 如圖 ↓ )
2. position: relative;
相對定位，也就是說它會依照原本排列的位置為基準，再依照你設定的 top、right、bottom、left 來產生位移。
⚠️ 注意: 當你第一個區塊用 relative 屬性來移動位置，而在它後面的第二區塊若也是設定 relative 來移動位置，它們倆之間是不會互相推擠影響的，也就是說第二區塊是依照它自己的相對位置來移動，跟第一區塊無關，因此它們也可以重疊在一起，不懂? 上圖↓
有沒有發現綠色色塊和粉紅色塊重疊了，因為粉紅色塊下移了16px，而綠色色塊是top: 0 ; 所以粉紅色塊佔用了綠色色塊的位置，也因為他們不會互相推擠所以導致重疊，而這重疊的高度會是粉紅色塊下移的 16px 。
使用情境：版面定位方式有很多，所以我會先看設計稿的版面配置，看他適合哪一種，並且看哪些區塊需要依照母層位置來定位子層，以及母層裡面子層的複雜程度來決定(因為有時候子層的內容比較多，可能就會產生遮來遮去的問題)。
舉例來說：popup 的右上角我要放一個 關閉按鈕，因此我會在這個 popup 的 header 設為母層，關閉按鈕設為子層，如圖↓
3. position: absolute;
絕對定位，absolute 就是個媽寶，他是一個需要母親的孩子，所以它的定位就是依照母層的邊界來定位的，一旦你的區塊設置了absolute 這個屬性，他就會開始往外找媽媽( position: relative; )，如果找不到他就會把 body (整個網頁) 當媽，以 body 的左上角當基準點。
範例一: 外層 有設定 position: relative;
範例二: 外層 沒有設定 position: relative; .child-01 ( 綠色色塊 ) 找不到外面有母層就去找 body (深粉色色塊) 當母層
4. position: fixed;
固定定位，它以整個瀏覽器視窗來定位，當你設定好它的 top、right、bottom、left 後，它就會定在那邊不動，即便你頁面滾動它還是會定在那邊 Fixed 這個定位方式還蠻常使用，不過他在做手機版網頁時有時會出現怪異的現象，要多加注意，在這邊先不多加贅述。
使用情境：做導覽列(menu)、左右側廣告、快速導覽或是手機版網頁的header、footer...等。
5. position: sticky;
看了很多文章發現還是「 滾動黏滯定位 」這個名詞比較適用，當區塊裡的內容超出所屬區塊(也就是出現scroll bar)時，它才會發生作用，而他的行為模式就是 relative + fixed 的綜合版，怎麼說呢? 在還不需要scroll-bar 的區塊時，它的作用就像 relative 一樣依照原本的 flow 去佔位，而當區塊出現scroll-bar 它又會像 fixed 一樣黏在你指定的位置。
使用情境：我個人比較常運用在導覽列或表單的表頭，因為有時候列表式的表單內容很長就會需要scroll，但又希望它只要在這個區塊滾動，且表頭要黏在上面不要動，這時我就會用sticky，當然你可以直接用 table 來做，但有些時候會需要做假 table 時這個就會很好用。( 順帶一提，要完成這種效果方式很多，不一定要使用 sticky，畢竟我個人使用下來還蠻常遇到相容性的問題 )
⚠️ 注意: 當你使用 position: sticky 時，你的父層不可以是 overflow: hidden; 不然它會無法滾動，還有要記得設定 top、right、bottom、left 四個其中一個得值，不然它也是不會滾動。
【 以上是我針對 position 定位做的筆記，使用情境為個人開發經驗僅供參考 ，歡迎各位討論指教 🙏 】
留言列表
