布局模型(4)层模型的特征

position:fixed; （固定定位）

　　由于广告的滥用，使得一些浏览器软件都开始有了广告内容拦截，使得一些很好的效果现在都不推荐使用了。比如让一个元素可能随着网页的滚动而不断改变自己的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果，这个元素属性就是曾经不被支持的position:fixed; 他的含义就是：固定定位。这个固定与绝对定位很像，唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <meta name="Design Corp" content="jonmax.com" /> <meta name="Designer mail" content="maozhenzhi(at)gmail.com" /> <meta name="roots" content="jonmax.com" /> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <title>固定定位示例</title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="stylesheet" rev="stylesheet" type="text/css" media="print" href="jonStyle/css/print.css" /> <link rel="stylesheet" rev="stylesheet" type="text/css" media="screen, projection" href="jonStyle/css/master.css" /> <link rel="stylesheet" rev="stylesheet" type="text/css" media="screen, projection" href="jonStyle/css/master_color.css" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="/index.xml" /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="/rsd.xml" /> <link rel="start" href="" title="Home" /> <style type="text/css"> /*<![CDATA[*/ body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow:auto;} #menu {right:0; top:0; width:130px; position:fixed; padding:10px; text-align:center; font-weight:bold; background:#000;} * html #menu {position:absolute; right:16px;}/*only for ie*/ html {overflow:auto !important; overflow:hidden;} /*]]>*/ </style> </head> <body id="" class=""> <div id="menu"> <a href="#" _fcksavedurl="#" title="Dummy menu item">Mozilla</a> <a href="#" _fcksavedurl="#" title="Dummy menu item">Opera</a> <a href="#" _fcksavedurl="#" title="Dummy menu item">Netscape</a> <a href="#bites" _fcksavedurl="#bites" title="Dummy menu item">Firefox</a> <a href="#" _fcksavedurl="#" title="Dummy menu item">IE6</a> <a href="#" _fcksavedurl="#" title="Dummy menu item">Windows</a> <a href="#" _fcksavedurl="#" title="Dummy menu item">Style</a> <a href="#" _fcksavedurl="#" title="Dummy menu item">CSS</a> </div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> <div>看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</div> </body> </html>
提示：您可以先修改部分代码再运行

　　虽然原来的浏览器并不支持过个属性，但是浏览器的发展使得现在的高级浏览器都可以正确的解析这个CSS属性。并且通过CSS HACK来让IE6都可以实现这样的效果（目前无法使IE5.x）实现这种效果。

Home << 1 2 3 4 >> End

作者：发布时间：2008年10月07日点击数：【收藏】【打印文章】

上一篇：布局模型(3)浮动模型的特征　　下一篇：布局模型(5)混合布局中的浮动模型与流动模型

动易雅虎

推荐阅读

布局模型(4)层模型的特征

作者：发布时间：2008年10月07日点击数：【收藏】【打印文章】

查看本文的所有评论 >>网友评论