css中的position屬性值的探究
css的position屬性指定了元素的定位型別，然後通過top，botton，left，right來具體定位。
在具體定位之前必須使用position屬性，否則所有的具體定位屬性都無法生效。
position可選擇的值一共五個：static ，relative，absolute，fixed，或sticky。
下面博主將一一進行含程式碼和執行結果的對比解釋
首先是不設定position屬性，可以看到two元素的top的屬性並未生效，而顏色屬性是有效的，當前位置是預設文件流中的位置，以此為原型對比position改變時的元素位置的變化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./j.css">
</head>
<body>
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
</div>
</body>
</html>
.box { display: inline-block; background: red; color: white; } #two { top: 260px; bottom: 126px; left: 20px; background: blue; }
position：static
在#two的類下新增position：static;如下（後面每處只修改position的值）
#two { position:static; top: 260px; bottom: 126px; left: 20px; background: blue; }
HTML元素的預設值，即沒有定位，元素出現在正常的流中。
靜態定位的元素不會受到 top, bottom, left, right影響。
這個值既然會使定位屬性失效，那麼它存在的意義是什麼的？
在網頁樣式修改的過程中，可以暫時的遮蔽某些元素的位置資訊，或者在修改的時候，保留，某些部分的位置資訊，便於恢復。
position：relative
相對定位，相對與原來正常文件流的位置定位，但是在定位時不改變原來的頁面佈局，既是相當於只是把定位的元素進行了移動，而移動的對比標準位置就是正常文件流中的位置，而原來的位置會留白。
position ：absolute
絕對定位，該元素將從普通文件流中刪除，並且不會為頁面佈局中的元素建立空間。他相對於最近已定位的父元素定位。例子中即是根據body元素來定位的。
position ：fixed
固定定位，所謂固定定位和絕對定位相似，一樣都會從普通文件流中刪除，並且不會為頁面佈局中的元素建立空間；不一樣的是它是固定在視窗上的，是以視窗為定位物件的的，相信大家瀏覽很多網頁時都有這樣的感受，網頁上部或者下部會有廣告不會隨著網頁的上下滾動而移動，它們是固定在網頁上的，並且如果沒有設定z-index來修該疊放次序，它們會覆蓋網頁的內容。
position ：sticky
該元素並不脫離文件流，仍然保留元素原本在文件流中的位置。
當元素在容器中被滾動超過指定的偏移值時，元素在容器內固定在指定位置。亦即如果你設定了top: 20px，那麼在sticky元素到達距離相對定位的元素頂部50px的位置時固定，不再向上移動。
元素固定的相對偏移是相對於離它最近的具有滾動框的父元素，如果父元素都不可以滾動，那麼是相對於viewport來計算元素的偏移量
