*星號(hào)為便于本人個(gè)人理解的理解方式,如理解有誤請(qǐng)指出
position: absolute
使元素脫離原來的文檔流,相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位。如果不存在這樣的包含塊,則相對(duì)于body元素,即相對(duì)于瀏覽器窗口。
會(huì)生成一個(gè)塊級(jí)框。
*相當(dāng)于將元素放置到原來頁面層的上層圖層,對(duì)下層不會(huì)產(chǎn)生干擾。
top / bottom / left / right 屬性使元素相對(duì)于默認(rèn)位置進(jìn)行移動(dòng)。(默認(rèn) top: 0; left:0,元素位于父包含塊的左上角)
position: relative
使元素相對(duì)于原來的位置移動(dòng),但文檔流中保留元素初始所占的空間。
*相當(dāng)于在原頁面層用透明色替代了元素,并元素置于上層圖層。
top / bottom / left / right 屬性使元素相對(duì)于原來位置進(jìn)行相對(duì)移動(dòng)。(默認(rèn) top: 0; left:0,元素不移動(dòng))
position: absolute 與 position: relative 的結(jié)合使用
為前輩元素設(shè)置屬性 position: relative,其后輩元素設(shè)置屬性 position: absolute,可以使后輩屬性相對(duì)于前輩屬性的位置進(jìn)行定位布局。
position: fixed
生成絕對(duì)的定位,相對(duì)于瀏覽器窗口進(jìn)行定位。頁面滾動(dòng),元素的位置相對(duì)于始終不變。
*會(huì)生成一個(gè)塊級(jí)框。