DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> CSS position:fixed 實現html元素固定於某位置
CSS position:fixed 實現html元素固定於某位置
編輯:CSS特效代碼     

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved