日期：2020 年 6 月 22 日前言
說到 css 的 position 屬性，大家都知道也都用過，但是要說它有幾個取值以及這些值的不同，可能有部分同學會啞口無言，畢竟這不影響日常開發（手動狗頭），身為一名有夢想的程式設計師，我們應該秉承刨根問底的鑽研精神，不能淺嘗輒止、不求甚解，萬丈高樓平地起，基礎才是萬物之根，基礎知識掌握了，後面的學起來也會更容易
廢話不多說，正文開始
小序position 屬性的取值有：static | relative | absolute | fixed | sticky | inherit | initial | unset
其中 inherit、initial、unset 3個是 css 關鍵字，任何 css 屬性的取值都可以設定這幾個值，
那麼剩下的 5 種就是我們要講的，也是常用的 5 種：
static、relative、absolute、fixed、sticky
下面結合例項講一講它們的實際效果與區別
1、stctic
static 是 position 的預設屬性值，當 position 為 static 的時候，left | right | top | bottom 屬性無效，也就是當沒有設定 position 屬性的時候，會預設為是：
position: static;如果我們直接設定成position: static;效果也是一樣的，如下：
沒有設定 position 屬性
將 position 屬性設定為 static ，效果與上面一樣
2、relative
當 position 為 relative 的時候，如果設定了 left 、right、top、bottom 屬性，它們會生效，發生偏移時的參照為 position 屬性取 static 時盒子的位置，如下：
當 position 為 absolute 的時候，元素會被移出正常文件流，並不為元素預留空間，元素相對於最近的非 static 定位祖先元素發生偏移，如下：
當元素沒有非 static 定位祖先時，會相對 html 發生偏移：
當 position 為 fixed 的時候，元素會被移出正常文件流，並不為元素預留空間，元素相對於螢幕視口（viewport）的 位置來發生偏移, 元素的位置在螢幕滾動時不會改變，這一點與 absolute 不同，absolute 在螢幕滾動時會跟著一起滾動，如下：
sticky 定位，或者叫粘性定位，可以被認為是 relative 和 fixed 的混合，元素在跨越特定閾值前為相對定位，之後為固定定位。
也就是說 sticky 會讓元素在頁面滾動時如同在正常流中（relative定位），但當滾動到特定位置時就會固定在螢幕上如同 fixed ，這個特定位置就是指定的top、right、bottom、left 4個閾值其中之一
sticky定位的閾值是相對它的最近滾動祖先來定義的，而 sticky 的作用區域也是它的第乙個非static父元素內，也就是說粘性布局的效果只在該父元素內表現出來，這裡放一段**如下：
我是參照物（200 x 50）
以上純屬個人總結，如有錯誤，還請批評指正！
position 的屬性值
理論上來說，全部 position 的取值有8個 包括 position static relative absolute fixed sticky initial inherit unset 其中最常用的是 static relative absolute fixed 和 sticky initi...
css的position屬性值
css樣式表中的position屬性詳細說明 在css中關於position定位的內容是 position relative absolute static fixed static 靜態 沒有特別的設定，遵循基本的定位規定，不能通過z index進行層次分級。relative 相對定位 物件不可層...
CSS中的Position屬性
size large size large css的position很重要，有以下幾個值 static，relative，absolute，fixed。static 靜態定位。如果你沒有設定position屬性，那麼預設就是static。top，left，bottom，right等屬性，在stati...