本文章通過實例向大家講解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塊能夠固定在網頁右下角部位,無論是否拖動滾動條。