鋪展在網頁上的元素,總會遇到需要懸浮在某個位置,而不受頁面滾動影響的情況。這時候,就需要使用CSS懸浮固定位置的技巧。
position: fixed; top: 0;
以上代碼即可實現元素懸浮在頁面頂部。其中,position: fixed;
表示將元素設置為固定定位,top: 0;
表示將元素置于頁面頂部。
同樣的,我們也可以設置元素懸浮在頁面其它位置。例如,將一個文本框懸浮在頁面右下角。
position: fixed; right: 20px; bottom: 20px;
以上代碼即可實現文本框懸浮在頁面右下角。其中,right: 20px;
表示將元素距離頁面右側20像素的位置,bottom: 20px;
表示將元素距離頁面底部20像素的位置。
需要注意的是,設置元素懸浮固定位置后,如果其所在的父級元素滾動,仍會影響元素位置。如果需要完全脫離父級元素的影響,應該將元素直接放在頁面的
標簽下。position: fixed; top: 0; left: 0; z-index: 9999;
以上代碼可實現置頂按鈕,其中z-index: 9999;
表示將元素設置為最高層,確保在其它元素上方。
以上就是CSS懸浮固定位置的基礎技巧,應用靈活,可以滿足很多網頁布局的需要。
下一篇css懸浮動畫庫