定位:position
概念:把一元素放置到需要放的網頁位置;
屬性值:static、relative、absolute、fixed、inherit;
位置聲明:top、bottom、left、right;
absolute、fixed會使元素脫離文檔流;
特點:所有元素都可以進行定位處理,定位后具有塊的屬性。
相對定位:relative
使元素偏移某個距離,所占空間仍然保留;
實際開發:元素不會脫離文檔流,但是可以設置top、left等值進行操作,而且設置也是生效的。
1、如果元素的前面沒有其他元素時,參照父級(最近)的內容區的左上角為原始點結合top、left、right、bottom屬性進行定位;
2、如果元素的前面有其他元素,則針對上一個元素的位置進行定位。
絕對定位:absolute
設置絕對定位的元素,會脫離文檔流;(具有層疊關系)
激活元素的absolute,必須指定left,right,top,bottom 屬性中的至少一個;
絕對定位的元素相互層疊時,不具有 margin效果,但仍有 padding 和 border效果 。
絕對定位與相對定位的關系
(相對定位是相對于元素在文檔流中初始位置的;而絕對定位是相對于最近的已經定位的祖先元素。)
1、如果父級(無限)沒有設定position屬性,那么當前的absolute則結合top,right,left,bottom屬性以瀏覽器左上角為原始點進行定位;
2、如果父級(無限)設定position屬性,且屬性值為relative、absolute、fixed,那么當前的absolute則結合top,right,left,bottom屬性以父級(最近)的左上角為原始點進行定位。
相對瀏覽器定位:fixed
相對于瀏覽器窗口的指定坐標定位;
元素的位置可通過left、right、top、bottom屬性來規定;
IE6.0及以下版本的瀏覽器不支持position: fixed;