之前css學的一直不精緻而且沒有細節，為了成為一個完美的前端工作人員，所以決定重新學習css的屬性。當然會借鑒MDZ文檔（ "MDZ文檔" ）或其他博主的經驗來總結。在這裡會註明借鑒或引用文章的出處。侵權即刪。 position屬性值包括 static，relative，absolute，fixed ...
之前css學的一直不精緻而且沒有細節，為了成為一個完美的前端工作人員，所以決定重新學習css的屬性。當然會借鑒MDZ文檔（MDZ文檔）或其他博主的經驗來總結。在這裡會註明借鑒或引用文章的出處。侵權即刪。
position屬性值包括 static，relative，absolute，fixed，sticky（實驗屬性）5種。
1.static
該關鍵字指定元素使用正常的佈局行為，即元素在文檔常規流中當前的佈局位置。此時設置 top, right, bottom, left 和 z-index 屬性無效
<style>
.parent{
background-color: red;
width: 100px;
height: 100px;
}
.static{
width: 50px;
height: 50px;
/* position: static;
top: 10px; 這段註釋代碼加與不加沒有區別
left: 10px;*/
background: blue;
}
</style>
<div class="parent">
<div class="static"></div>
</div>
chrome瀏覽器運行草圖
2.relative
該關鍵字指定元素 即在不改變頁面佈局的前提下相對於自身原來位置調整元素位置（原來位置仍然保留）。**position: relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素無效**
<style>
.parent{
background-color: red;
width: 120px;
height: 120px;
}
.one{
width: 30px;
height: 30px;
background: green;
}
.two{
width: 30px;
height: 30px;
background: blue;
position: relative;
left: 10px;
top: 10px;
}
.three{
width: 30px;
height: 30px;
background: yellow;
}
</style>
<div class="parent">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>瀏覽器運行效果如下
3.absolute
不為元素預留空間，通過指定元素相對於最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設置外邊距（margins），且不會與其他邊距合併。
或
此時綠色方塊平移，而原來位置不再保留，其相鄰元素填充它原來位置並且是相對於html移動，脫離文檔流。
假如修改.parent代碼添加 position：relative。
.parent{
background-color: red;
width: 120px;
height: 120px;
position: relative;
/*left:0;*/
right: 0;
}
這兩圖說明綠色（.one）相對於父元素移動.
即 相對於 最近的 非 static 定位祖先元素的偏移，來確定元素位置
4.fixed
不為元素預留空間，而是通過指定元素相對於屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。
<style>
body{
height: 2000px;
width: : auto;
}
.parent{
background-color: red;
width: 1360px;
height: 50px;
position: fixed;
bottom: 0;
}
</style>
<body>
<div class="parent">
</div>
</body>
即 在滾動界面時 div.parent 始終 固定在頁面底部
5.sticky
盒位置根據正常流計算(這稱為正常流動中的位置)，然後相對於該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。在所有情況下（即便被定位元素為 table 時），該元素定位均不對後續元素造成影響。當元素 B 被粘性定位時，後續元素的位置仍按照 B 未定位時的位置來確定。position: sticky 對 table 元素的效果與 position: relative 相同
這個不大好演示請大家看文檔 sticky效果圖
本文同時借鑒了 Wayne Zhu 的文章
