position:absolute——絕對定位元素，脫離了文本流（即在文檔中已經不占據位置）。
1、absolute定位必須指定 left ， right ， top ， bottom 屬性中的至少一個，在沒有設定TRBL值時元素的位置遵從正常的HTML布局規則。
2、設定TRBL時，以最近有position定位(relative、absolute、fixed)的先級元素為原點（沒有這樣的先級元素則以瀏覽器左上角為原點）進行定位。
3、position:absolute會使元素會自動變為以 display:inline-block 的方式顯示。

詳見position:absoulate demo

?

position:relative——相對定位,就是相對于元素本身在文檔中應該出現的位置來移動這個元素,通過TRBL來移動元素的位置(實際上該元素依然占據文檔中原有的位置，只是視覺上相對原來的位置有移動)。
1、原來的位置還是被它占著（你看上面的紅色Div并沒有向上移動挨著藍色Div，就是這個原因），其它元素不能占有它的位置。

詳見position:relative demo

?

position:fixed——固定定位，與absolute定位類型類似，但它始終以是視圖（屏幕內的網頁窗口）左上角為原點進行移動，因為網頁窗口是固定的，所以它不會隨瀏覽器滾動條的滾動而變化。
1、IE6不支持此屬性。
2、用position:absolute+js可以解決IE6的兼容問題(如在ie6-position-fixed.css中用js動態算top的高度)。

詳見position:fixed demo

?

轉載于:https://www.cnblogs.com/junjieok/p/4558757.html

總結

以上是生活随笔為你收集整理的position的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。