在web開(kāi)發(fā)中,經(jīng)常需要固定一個(gè)div,不隨頁(yè)面的滾動(dòng)而移動(dòng)位置,這個(gè)時(shí)候可以使用css來(lái)實(shí)現(xiàn)。下面是具體實(shí)現(xiàn)的步驟:
div { position: fixed; top: 0; left: 0; }
其中,position: fixed;
屬性可以讓元素脫離文檔流,不影響其他元素的布局,可以自由定位。而top: 0; left: 0;
屬性可以讓元素定位在頁(yè)面的左上角。
另外需要注意的是,如果固定的div高度比頁(yè)面還高,會(huì)出現(xiàn)滾動(dòng)條,這個(gè)時(shí)候需要給包裹div添加overflow: auto;
屬性來(lái)使其可以滾動(dòng)。
.wrapper { overflow: auto; }
這樣就可以輕松地實(shí)現(xiàn)一個(gè)固定的div了。如果需要固定在頁(yè)面其他位置,可以通過(guò)修改top
和left
屬性的值來(lái)實(shí)現(xiàn)。