CSS定位是指在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中,通過(guò)設(shè)定元素在頁(yè)面中的位置,從而控制其在頁(yè)面中的布局。在CSS中,有多種不同的定位方式可以使用,包括: 相對(duì)定位、絕對(duì)定位、固定定位和浮動(dòng)定位。
/* 相對(duì)定位 */ position: relative; /* 絕對(duì)定位 */ position: absolute; top: 50px; left: 100px; /* 固定定位 */ position: fixed; top: 0; right: 0; /* 浮動(dòng)定位 */ float: left;
相對(duì)定位通過(guò)設(shè)置元素的position屬性為relative來(lái)實(shí)現(xiàn)。相對(duì)定位元素的位置是相對(duì)于其原本的位置進(jìn)行定位的。可以通過(guò)top、right、bottom和left屬性來(lái)分別向上、向右、向下和向左移動(dòng)元素。
絕對(duì)定位通過(guò)設(shè)置元素的position屬性為absolute來(lái)實(shí)現(xiàn)。絕對(duì)定位元素的位置是相對(duì)于其最近的父級(jí)元素進(jìn)行定位的,如果沒(méi)有父級(jí)元素,則相對(duì)于文檔的根元素進(jìn)行定位。可以通過(guò)top、right、bottom和left屬性來(lái)分別向上、向右、向下和向左移動(dòng)元素。
固定定位通過(guò)設(shè)置元素的position屬性為fixed來(lái)實(shí)現(xiàn)。固定定位元素的位置是相對(duì)于瀏覽器窗口進(jìn)行定位的。可以通過(guò)top、right、bottom和left屬性來(lái)分別向上、向右、向下和向左移動(dòng)元素。
浮動(dòng)定位通過(guò)設(shè)置元素的float屬性來(lái)實(shí)現(xiàn)。浮動(dòng)定位元素會(huì)從文檔流中脫離出來(lái),向指定的方向漂浮。可以通過(guò)clear屬性來(lái)清除浮動(dòng)元素對(duì)后續(xù)元素的影響。