在CSS中,可以使用position
屬性來(lái)設(shè)置元素的顯示位置,該屬性有以下幾個(gè)值:static
、relative
、absolute
、fixed
。
static
這是默認(rèn)值,元素按照正常的文檔流進(jìn)行顯示。
relative
元素按照正常的文檔流進(jìn)行顯示,但可以通過(guò)top
、right
、bottom
、left
屬性設(shè)置相對(duì)于其正常位置的偏移量。
absolute
元素脫離正常的文檔流,并可以通過(guò)top
、right
、bottom
、left
屬性設(shè)置相對(duì)于其***近的非static
定位祖先元素的偏移量,如果沒(méi)有非static
定位祖先元素,那么它會(huì)相對(duì)于初始包含塊進(jìn)行定位。
fixed
元素脫離正常的文檔流,并可以通過(guò)top
、right
、bottom
、left
屬性設(shè)置相對(duì)于瀏覽器窗口的偏移量,即使頁(yè)面滾動(dòng),它也會(huì)始終保持在相同的位置。
要將一個(gè)元素向右偏移20像素,可以使用以下CSS代碼:
element { position: relative; right: 20px; }
這將使元素在其正常位置的基礎(chǔ)上向右偏移20像素,同樣地,可以使用top
、bottom
屬性來(lái)設(shè)置元素的垂直位置。
當(dāng)使用***定位時(shí),元素會(huì)脫離正常的文檔流,這意味著其他元素將不會(huì)考慮該元素的存在,在使用***定位時(shí),需要謹(jǐn)慎處理元素的布局和樣式。