position 的屬性值: relative，absolute，fixed，static，inherit，sticky
static
- static(沒有定位)是position的默認值，元素處於正常的文檔流中，會忽略left、top、right、bottom和z-index屬性。
relative
- relative(相對定位)是指給元素設置相對於原本位置的定位，元素並不脫離文檔流，因此元素原本的位置會被保留，其他的元素位置不會受到影響。
使用場景：子元素相對於父元素進行定位
absolute
- absolute(絕對定位)是指給元素設置絕對的定位，相對定位的對象可以分為兩種情況：
1) 設置了absolute的元素如果存在有祖先元素設置了position屬性為relative或者absolute，則這時元素的定位對象為此已設置position屬性的祖先元素。
2) 如果並沒有設置了position屬性的祖先元素，則此時相對於body進行定位。
使用場景：
- 跟隨圖標 圖標使用不依賴定位父級的absolute和margin屬性進行定位，這樣，當文本的字符個數改變時，圖標的位置可以自適應
- 視頻提示 一般在視頻圖片上的邊角上都會有"自制"、"最新"、"1080p"等諸如此類的提示。使用不依賴的絕對定位屬性，可以讓父級元素不設置relative，拓展性更強
- 邊緣對齊
引用： https://www.cnblogs.com/xiaohuochai/p/5315942.html
fixed
- 可以簡單說fixed是特殊版的absolute，fixed元素總是相對於body定位的。
使用場景：側邊欄或者廣告圖
1.
inherit
- 繼承父元素的position屬性，但需要注意的是IE8以及往前的版本都不支持inherit屬性。
sticky
- 設置了sticky的元素，在屏幕范圍（viewport）時該元素的位置並不受到定位影響（設置是top、left等屬性無效），當該元素的位置將要移出偏移范圍時，定位又會變成fixed，根據設置的left、top等屬性成固定位置的效果。
- 當元素在容器中被滾動超過指定的偏移值時，元素在容器內固定在指定位置。亦即如果你設置了top: 50px，那么在sticky元素到達距離相對定位的元素頂部50px的位置時固定，不再向上移動（相當於此時fixed定位）。
使用場景：跟隨窗口