css position 小心得
最近有在研究position，在css中這算是一個非常重要的屬性，網頁中的定位全要靠它，在此整理一些研究時的筆記跟我的小小心得～ 首先，是我對position作用的理解 對網頁上物件的屬性添加了position就可以改變物件的排列方式，改變其在網頁上位置，但其實就算都沒有添加，原本物件間也會有自己的排列，所以我會覺得說，position它其實是在對網頁上的物件做一個「改變定位參考對象」的動作，預設狀態下參考對象會是原本物件資料自己本身的排列狀態，position的值會改變定位參考對象，從而改變物件排列方式。 position主要有的值大致分成以下五種： static relative fixed absolute sticky static 這個值是假如都沒設position，預設就會是satic。 幾個我覺得重要的點 使用了這個值，其他的定位方式都會失效 很少用到，因為預設就是static，我想要預設那我就不下就好 relative 相對定位，它的定位參考位置還是原本預設狀態的，但是可以讓顯示位子去做偏移，意思就是能在不改變網頁佈局的狀態下去改變物件位子，假如去做偏移的話，會依造原本預設狀態的基礎下再去改變 absolute 絕對定位，它的定位參考位置就直接脫離原本預設狀態，所以讓設定的物件做偏離之外，就不會佔據任何空間 ＝ 其他沒被absolute且還是原本預設狀態的物件也會被跟著影響。另外，它的參考對象會是最近的非static設定的父層空間，所以常常在使用absolute時它的父層會在設定一個relative就是此道理，除了relative之外，fixed跟sticky也可以作為定位參考對象 fixed 固定定位，它的定位參考對象一樣會脫離原本的預設狀態，不過跟absolute不同的是，所定位參考對象會是當前視窗，意思就是當在滑動視窗捲軸時，不管怎麼滾動，被設定了fixed的物件都能一直固定在相同位置，等等講完sticky會一起用示意圖來跟abosolute做比較 sticky 黏貼定位，擁有剛剛所講述的relative和fixed的特性，關於定位參考對象可以成在跨過特定值前為相對定位，之後為固定定位，那什麼是特定值呢？ 這就要來說到為什麼要使用黏貼定位： 簡單來說，是想要在網頁畫面上有著固定的效果，但是滑到一定地方之後，就不想繼續固定時，就會使用stick