本文章通過實例向大家講解position:fixed 實現html元素固定於某位置。實例中div將固定於網頁右下角,主要使用到css position:fixed 屬性,需要的碼農可以參考一下。
CSS實現div固定於網頁右下角實例代碼:
將一個元素固定於網頁右下角的效果使用非常頻繁,比如返回頂部的按鈕,或者說是信息提示框之類的,下面就介紹一下如何使用CSS實現此效果,代碼實例如下:
<!DOCTYPE html> <html> <head> <title>CSS position:fixed 實現html元素固定於某位置</title> <style type="text/css"> *{ padding:0; margin:0; } body{height:1000px;} #footer{ position:fixed; background:#eee; bottom:20px; right:10px; width:100px; height:100px; } </style> </head> <body> <div id="footer"></div> </body> </html>
在線運行
以上代碼實現了我們的要求,div塊能夠固定在網頁右下角部位,無論是否拖動滾動條。