理論上來說，全部 position 的取值有8個
包括：position：static | relative | absolute | fixed | sticky | initial | inherit | unset
其中最常用的是 static 、relative、absolute、fixed 和 sticky
initial、inherit、unset 是css的關鍵字，任何css屬性的取值都可以設定這幾個值
position: static
預設值，在正常流中，對設定的 top 、left、right、bottom、z-index 一應忽略
position: relative
相對定位，相對於自己原來的位置偏移，（例：top: 10px; // 移動後元素頂部位於原位置頂部下10px;）
脫離文件流，但在文件流中保留原位置的空間（預留空間），
也就是說，元素原來位置會一直保留空白佔位，相鄰兄弟元素會保持原來的位置，不會隨元素的移動而改變
注意：position: relative 對 table-*-group，table-row，table-column，table-cell，table-caption 元素無效。
栗子：
position: absolute
絕對定位，若祖先元素有設定 position: static 以外的屬性值，則相對該祖先元素絕對定位；否則，相對瀏覽器視口絕對定位
（在這裡說乙個注意點，大多數人認為是相對 html 或 body 元素絕對定位，這是個誤區；當頁面是可滾動的，就可以看出是相對瀏覽器視窗絕對定位的了，而不是整個 html 內容；這裡我也懶得寫例子了，我就直接借鑑別人的吧：css高階——絕對定位元素的寬高是如何定義的
）因此，一般做法是將該絕對定位元素的父元素加上 position: relative 屬性
脫離文件流，不預留空間，該元素下的兄弟元素位置上移
栗子：
但 position: absolute 並不僅有以上這個用途；
在按其內容大小調整尺寸的元素（例如 height 和 width 被設定為 auto，又或者行內元素），若該元素被絕對定位 position: absulute ，則可以通過指定 top / bottom / left / right , 保留 height 未指定（即 auto）, 來填充可用的垂直（水平）空間
什麼意思呢？淡定，來吃些栗子吧：
（除此之外，絕對定位的元素可以設定外邊距（margin），且不會與其他邊距合併，這個就不舉栗子了）
寫上面例子的時候還是有個疑問的：
既然絕對定位是脫離文件流的，為什麼行內元素絕對定位的時候，在不設定 left 值時，它的原點是位於原位置的原點的呢？而不是位於父元素的原點呢？
（找了許久沒找著原因，這個留著以後慢慢解答吧）
position: fixed
固定定位，相對瀏覽器視窗固定定位，不隨滾動條滾動，實現的樣本就是日常網頁中的廣告彈窗
脫離文件流，fixed 屬性會建立新的層疊上下文。
注意：當該固定元素的祖先元素的 transform 屬性非 none 時，容器由瀏覽器視窗改為該祖先元素
粘性定位，相當於相對定位和固定定位的混合。粘性定位根據乙個閾值決定，在大於等於閾值時採用相對定位，小於閾值後則為固定定位。
這個閾值就是top 、right 、bottom 、left 四種之一，必須設定了其中乙個，才能讓粘性定位生效，否則一直表現為相對定位。
粘性定位除了以上條件之外，還有幾點需要注意，否則粘性定位會失效：
1. 父元素的內容需滾動檢視，且不能有 overflow: hidden 、 overflow: auto 屬性
2. 父元素的高度不能低於粘性定位元素的高度
3. sticky 是容器相關的，只會在它所處的容器（父元素）裡生效。
sticky 栗子：demo
粘性定位的相容問題：
1. 需寫下兩條css語句：
position: sticky; 和 position: -webkit-sticky; /* safari */
2.internet explorer, edge 15 及更早 ie 版本不支援 sticky 定位。
position: initial
initial 關鍵字用於設定css屬性為它的預設值（在這裡也就是 position: static）
注： ie不支援該關鍵字
position: inherit
每個 css 屬性定義的概述都指出了這個屬性是預設繼承的 ("inherited: yes") 還是預設不繼承的 ("inherited: no")。
關於 inherit 的妙用可以看看這裡：談談一些有趣的css題目（四）– 從倒影說起，談談 css 繼承 inherit
position: unset
unset 關鍵字是 initial 和inherit 的組合:
1. 如果該屬性是預設繼承屬性，則該值等同於 inherit
2. 如果該屬性是非繼承屬性，則該值等同於 initial
unset 的一些妙用可參考：有趣的css題目（15）： 談談 css 關鍵字 initial、inherit 和 unset
至此，第一條部落格總算是磕磕碰碰寫完了，雖然一直也有做筆記總結，但是寫出來還是覺得自己可能還有疏漏，寫部落格不容易，堅持寫更是不容易了，由衷佩服那些讓我學到知識的部落格大牛們！感恩~
本文參考：
1. 有趣的css題目（15）： 談談 css 關鍵字 initial、inherit 和 unset
2. 談談一些有趣的css題目（四）-- 從倒影說起，談談 css 繼承 inherit
3. css高階——絕對定位元素的寬高是如何定義的
4. mdn position屬性
css的position屬性值
css樣式表中的position屬性詳細說明 在css中關於position定位的內容是 position relative absolute static fixed static 靜態 沒有特別的設定，遵循基本的定位規定，不能通過z index進行層次分級。relative 相對定位 物件不可層...
Position的屬性和屬性值及差別
position的四個屬性 1.relative 生成相對定位的元素，通過top,bottom,left,right的設定相對於其正常 原先本身 位置進行定位。可通過z index進行層次分級。2.absolute 生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位。元素的位置...
CSS中position的幾個屬性值
b position的四種取值 b static static定位就是不定位，出現在 就顯示在 這是預設取值，只有在你想覆蓋以前的定義時才需要顯示指定 relative relative 就是相對元素static定位時的位置進行偏移，如果指定static時top是50象素，那麼指定relative並...