原文連結: https://appcs342.blogspot.com/2022/04/css-position.html
移植時的最後更新日期: 2022-04-08T21:36:10.985-07:00

 最近有在研究position，在css中這算是一個非常重要的屬性，網頁中的定位全要靠它，在此整理一些研究時的筆記跟我的小小心得～


首先，是我對position作用的理解

對網頁上物件的屬性添加了position就可以改變物件的排列方式，改變其在網頁上位置，但其實就算都沒有添加，原本物件間也會有自己的排列，所以我會覺得說，position它其實是在對網頁上的物件做一個「改變定位參考對象」的動作，預設狀態下參考對象會是原本物件資料自己本身的排列狀態，position的值會改變定位參考對象，從而改變物件排列方式。


position主要有的值大致分成以下五種：

  • static
  • relative
  • fixed
  • absolute
  • sticky

static

這個值是假如都沒設position，預設就會是satic。
幾個我覺得重要的點
  1. 使用了這個值，其他的定位方式都會失效
  2. 很少用到，因為預設就是static，我想要預設那我就不下就好

relative

相對定位，它的定位參考位置還是原本預設狀態的，但是可以讓顯示位子去做偏移，意思就是能在不改變網頁佈局的狀態下去改變物件位子，假如去做偏移的話，會依造原本預設狀態的基礎下再去改變















absolute

絕對定位，它的定位參考位置就直接脫離原本預設狀態，所以讓設定的物件做偏離之外，就不會佔據任何空間 ＝ 其他沒被absolute且還是原本預設狀態的物件也會被跟著影響。另外，它的參考對象會是最近的非static設定的父層空間，所以常常在使用absolute時它的父層會在設定一個relative就是此道理，除了relative之外，fixed跟sticky也可以作為定位參考對象




fixed

固定定位，它的定位參考對象一樣會脫離原本的預設狀態，不過跟absolute不同的是，所定位參考對象會是當前視窗，意思就是當在滑動視窗捲軸時，不管怎麼滾動，被設定了fixed的物件都能一直固定在相同位置，等等講完sticky會一起用示意圖來跟abosolute做比較

sticky

黏貼定位，擁有剛剛所講述的relative和fixed的特性，關於定位參考對象可以成在跨過特定值前為相對定位，之後為固定定位，那什麼是特定值呢？ 這就要來說到為什麼要使用黏貼定位：

簡單來說，是想要在網頁畫面上有著固定的效果，但是滑到一定地方之後，就不想繼續固定時，就會使用sticky，關於上述所提到的特別值，也就是在設定黏貼定位，必須要指定top、right、 bottom 、left 這四個屬性值其中之一，否則sticky的行為就會變得跟相對定位一樣

三者示意圖比較時間






















最後來講一些我自己覺得在學習position時一些重要的地方

  • position有什麼值  為什麼要分這些值
  • 預設時跟有了position之後的狀態改變
  • 不同值所參照的容器層也不同，哪裡不同

研究position的資料來源