相對定位:position: relative
- 沒有脫離標準文檔流
- 層級自動提高调煎,會覆蓋浮動元素
- left:距離左邊移動
- right:距離右邊移動
- top:距離上邊移動
- bottom:距離下邊移動
絕對定位:position: absolute
absolute 布局的關鍵點選擇哪一個元素作為布局區(qū)域镜遣,如果元素的所有父元素均未設置 position 屬性(值為 static),布局區(qū)域會選擇可視區(qū)域士袄。
- 如果祖先元素沒有定位悲关,相對于瀏覽器定位
- 如果祖先元素有定位,相對于"最近的"定位的祖先元素定位
- 絕對定位會脫離標準文檔流,影響下邊的元素
- 絕對定位找參照祖先元素娄柳,應該用relative
- 經過絕對定位的元素會變成行內塊元素
固定定位:position:fixed
- 不占據(jù)空間寓辱,固定定位是脫離標準流。
- 以瀏覽器的可視窗口為參照點移動元素赤拒。
- 跟父元素沒有任何關系秫筏。
- 不隨滾動條滾動
粘性定位:position:sticky
- 以瀏覽器的可視窗口為參照點移動元素。
- 占有原先的位置挎挖。
- 必須添加top这敬、left、right蕉朵、bottom其中一個才有效崔涂。
- 兼容性差,IE不支持始衅,不常用冷蚂。
- 粘性定位并不會 脫離文檔流
層級關系 : 定位層級>浮動層級>標準文檔流的層級
參考:鏈接