CSS3中的吸頂效果可以讓網頁上的一個元素跟隨用戶在頁面中滾動,并固定在頁面頂部。
#header{ position:fixed; top:0; left:0; width:100%; z-index:9999; }
通過設置元素的position屬性為fixed,將其相對于瀏覽器窗口定位并固定,同時設置top屬性為0,即可將元素固定在頁面頂部。需要注意的是,固定在頁面頂部的元素會遮擋頁面中其他元素,因此需要將其z-index屬性設置得比其他元素高。
與吸頂效果相似的還有一種懸浮效果,其實現原理與吸頂類似,只需要設置元素的position屬性為absolute,并根據需要設置其top和left屬性即可。
#sidebar{ position:absolute; top:50px; right:0; width:300px; }
需要注意的是,固定在頁面頂部或側邊的元素會使頁面布局變得不穩定,需要根據實際需要進行調整。