跨浏览器的CSS固定定位{position:fixed}
不知道您是否留意了，浏览本站时，浏览器右下角有一个标着top的黑色直角三角形，可以点击它返回到正在浏览的网页页眉。当滚动网页时，它的位置一直没有任何改变，您感觉它怎么样？这就是通过CSS的定位属性{position:fixed}来实现的，通过它可以让HTML元素脱离文档流固定在浏览器的某个位置。
- IE7、Firefox、Opera，都支持CSS的{position:fixed}，所以很容易实现（《详解定位与定位应用》）
- IE6不支持该属性，但是在使用!DOCTYPE 声明指定standards-compliant（标准）模式可以通过CSS hack实现
- 上述声明下IE5和IE5.5目前没有发现通过纯粹CSS能够解决的方案，但是可以通过IE特有的expression在CSS中实现（移动网页时固定元素会动），这和常见浮动Logo广告利用Javascript实现原理是一样的，只不过可以直接写在CSS中比较简便的
- 利用IE独有的条件注释语句可以针对不同的IE版本精确设置，同时避免了这些代码被其他浏览器读到，个人认为比纯粹的CSS Hack好，如果你安装了多个IE（包括绿色版本），条件注释将会以最高版本的IE为标准。
实现代码如下：
<!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>
......
<style type="text/css">
#fixed{position:fixed;top:5em;right:0;......} 针对IE7、Opera、Firefox一行搞定
</style>
IE6中利用容器对溢出内容的处理方式来实现的
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
fixed元素的绝对位置是相对于HTML元素来说，滚动条是body元素的，这是设置right:17px的原因
</style>
<![endif]-->
<!--[if lt IE 6]>
<style type="text/css">
#fixed{position:absolute;top:expression(eval(document.body.scrollTop + 50));}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
......
</div>
<div id="fixed"><h2>{position:fixed}</h2></div>
</body>
</html>
代码演示1（单个IE，纯粹通过条件注释区分IE浏览器）
代码演示2（多个IE，通过条件注释+CSS hack区分IE浏览器，明显的比纯粹条件注释复杂且不易读，放上来主要是便于同个PC拥有多个IE浏览器朋友[一般应该做是web开发的]可以直接看到效果，下同。）
或许有人像我一样，在!DOCTYPE 声明是XHTML1.0 Strict或者是XHTML1.1时，喜欢在声明前面加上XML Prolog(如：<?xml version="1.0" encoding="utf-8"?>)，但此时IE7以下都处于Quirks（兼容）模式，所以上述针对IE6的Hack失效，这个时候你可以对IE6也通过expression来实现。
当IE6处于quriks模式时，IE6和IE5.5对CSS解析方式几乎雷同，所以当看到《position:fixed for Internet Explorer》时，我找到了在Quirks模式下IE6/IE5.5/IE5统一的CSS解决方案：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
......
<!--[if lt IE 7]>
<style type="text/css">
body{overflow:hidden;}
#wrapper{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
......
</div>
<div id="fixed"><h2>{position:fixed}</h2></div>
</body>
</html>
代码演示3（单个IE，纯粹通过条件注释区分IE浏览器）
代码演示4（多个IE，通过条件注释+CSS hack区分IE浏览器）
对比两个纯粹的CSS hack发现，两个原理似乎相同，在于html元素和body元素的应用和对CSS的{position:fixed}的支持程度上，但是这实际上是一种Hack，基本上不具备通用性，知道这个方法就可以了。需要提醒的是IE6 standards-compliant模式下HTML元素不管给它设置什么样的高度和宽度，它的大小都始终充满整个浏览器的可视区域，而IE5 以及 Quirks 模式下html元素和body元素所有宽高设置都会被忽略而保持充满浏览器的可视区域，更多内容请看《IE 中的 html 元素》
或许有人会想，现在可以引入了XML Prolog又能用纯CSS方法解决了IE7以下的问题，这下爽了，但是加上XML Prolog后突然发现IE6处于Quirks模式，以前在standards-compliant模式下的设计又变形了，呵呵，这就是咱们搞IE的下场。
标签：CSS, IE, position:fixed
作者：秦歌，时间:2007-04-19 1:00，归纳于：HTML & CSS，订阅：RSS 2.0，引用：Trackback
收藏一下。
好快好快，现在的网站好快，俺喜欢
虽然看不懂，还是收藏下，不知道我是谁吧，你回知道的，回北京找找你老鄢
针对ie6的做法虽然很好，但是页面其他的部分就不能再用绝对定位啦，不知道秦歌考虑这个问题啦吗？
呵呵，这个例子只是展现这个原理，其实只要理解认清楚position的含义，很容易解决的。上面一个例子中，你只需要设置#wrapper{position:relative;},然后在<div id=”wrapper”></div>中的元素进行绝对定位即可。
举个实际的例子，其实本站的头部背景用的就是绝对定位。
右下角的top按钮，用啦两个id，这个好像是不允许的。
还有网站的最上面收藏本站用的是绝对定位，不知道你是怎么实现的。
另外我看啦下你的代码，body并没有overflow：auto，那么top按钮是怎么实现定位的呢
希望能帮我解答以下，谢谢
谢谢楼上指出我的错误，一个页面内ID是唯一的，这应该是我疏忽写上去的，浏览器能够容忍这种错误，不知道是我的幸运还是我的不幸。
呵呵，body只是一个容器，body里面的子标签一样可以担当这个容器，在我的站点中因为实际需要，我把body{height:100%;overflow:hidden;}相当于例子中html标签的角色，也就是使其充满浏览器的可视区域，并使其溢出部分隐藏起来，把#wrapper{overflow:auto;}相当于例子中body标签的角色，当页面过长的时候，它的实际大小和body一样，过长的内容导致了#wrapper的滚动条出现，而#top是相当于body的绝对定位，从而可以浮动在#wrapper上面，这样就模拟出了position:fixed的效果。
当然你还可以向更深的标签来实现这个效果，一切是因需而定。
多谢秦歌
还有一个问题我想请教以下
body里面line-height：1.4；有什么用呢？
我以前是解决a标签的下划线时候用的
另外一个问题是
body标签如果设置height：100%；它的高度是可以自动撑大的
但是以前firefox的版本好像是只有浏览器那么高
我想问以下是不是firefox修正啦bug呢？
line-height是控制行距的，给标签设置height，标准的方法是内容溢出时会被隐藏掉，但是在IE7以前的IE浏览器，设置height值，就相当于在IE7或者Firefox中设置了min-height,这方面你可以好好看看CSS2的手册
请教一下，怎么用css设置一个div，使其始终处于窗口的中心位置。在css中可以动态获得窗口大小吗？
呵呵，关于楼上的问题曾是我一直想写篇东西，在这篇东西没有出来之前楼上可以先看看《未知高度的非表格垂直对齐》，应该会有思路的。
哥们，我终于找到原始作者你的网站了！
问下，你的文章我看明白了，但是实际应用当中还是有问题
一、我和你一样用的wordpress，在做模板的时候，之类的语句应该放在哪里？单独的css文件里面能放么，还是放在header里面？
二、使用!DOCTYPE 声明指定standards-compliant（标准）模式，具体怎么做，是必须的么？
三、这几种方法，对div子对象和父对象有没有要求？（具体而言，就是需要fixed的绝对定位的div，如果有子对象和父对象，会不会有影响？具体怎么个影响？）
方便的话，烦请回答下，多谢！
一、如果仅仅是为了实现效果，可以放在任何地方，不过最好还是放在独立的css里面。
二、就是通过DTD声明成严格模式（strict），这个是不是必须和你的要求有关。DTD不同，处理方法就不太同，这正式本文所说明的。
三、fixed的元素的子元素当然随着其父元素在浏览器中绝对定位，fixed元素是脱离文档流的，所以其父元素对其在位置上不会存在影响，反之亦然。
啊哈，明白了不少，前段时间没来看你回复，抱歉。
之前我没仔细注意doctype的声明。。。。。惭愧惭愧。。多谢秦歌百忙之中耐心解答！
[...] 更新： 2008-08-31 1.1.1再次修正，现在控制界面完美的停留在左下位置，不随滚动条移动；感谢随网之舞的文章 2008-08-28 发布1.1版本，不再需要用户修改核心文件 ； 2008-08-26 发布1.0版本； 下载:PluginsLink.1.1.1 已经下载(9 次) function toggleview(elementd) { var elementd = document.getElementById(elementd); if (elementd.style.display == ‘none’ || elementd.style.display == ”){ elementd.style.display = ‘block’; elementd.style.position = ‘absolute’; }else{ elementd.style.display = ‘none’; } return; } #quotediv {width: 400px; display: none;} #quotefrm { bord:0;} 引用本文，复制粘贴… <blockquote> 插件装多了，很多时候想在后台管理界面找设置的地方找半天，而且有些插件放在管理窗口有些插件放在设置窗口还有些在QuickTags栏上面。。。… <b><br /> <a href=”http://www.quakemachine.com/blog/?p=13″>My Plugins: Plugins Link</a> – http://www.quakemachine.com/blog</b></blockquote> Tags: manager, plugin, wordpress [...]
秦歌你好，读了你这篇文章有些时日了。我的是一个居中的页面带右上角绝对定位菜单。照样修改了以后，有了一个新问题：有时候（似乎与显示的文章内容有关）IE6的滚动条会突突突的自动向左面跑。整了半天也弄不明白，于是想请你帮忙看看。网页技术上的问题我实在是不大了解。因为我的设计作品集页面使用的是同样的主题，所以这个问题对我来说还是蛮重要的。我知道这样麻烦你很冒昧，如果在设计或者图片处理或者三维软件方面你有什么需要我会很乐意效劳。我把主题文件上传到我的空间了，http://wg-20.de/exchange/wg-20.zip，如果你能有时间帮我改改的话，可以用邮件回发给我。也欢迎加我的MSN. 非常感谢 o(^_^)o
感谢你关注这篇文章，最近有点忙，你能不能把这个主题用起来，然后把有问题的页面的URL给我，我搞了一会没有发现这个问题，不好意思，这么久才回你。
[...] 五月份开始接触WordPress，对网页技术文盲一个。但是挑剔，觉得现成的WP主题没有很适合的，终于还是自己弄。现在页面是在 WPAndreas07 的基础上修改的；不过经过几个月，原先的代码已经不剩什么了，应该可以算作原创主题了吧。一开始的想法有这么几个：大标题，较一般稍大的正文字体，首页节选输出，上下帖子间大段空白，不必要的功能一概不要，侧边拦要尽量减少对正文阅读的干扰。慢慢修改到现在算是一个阶段吧。贴一下，大家看看自己的感受和我的设想有多大偏差，顺便挑挑毛病。 第一版从六月底开始写，边用边修改，这是到十一月初改版前的样子。右手菜单栏用了position:fixed相对屏幕固定，不随正文滚动，初衷是方便访问。不过IE6不支持这个属性。尝试了随网之舞上的办法，也没能完美地解决。评论后来从正文下面移动到了标题旁边（谢谢cocou的意见）；网站标题，或者说回首页的连接，因为不喜欢每天看自己的名字，到后来变成了菜单栏上面的一个箭头。其它就不细说了，如果有人觉得这一版哪里比现在的版本好，请具体指出。 [...]
[...] 跨浏览器的 CSS固定定位 [...]
文章太好了！！！
崇拜一下
/*======================全部左右广告开始==========================*/
#left-ad,#right-ad-a {
position:fixed;
top:100px;
}
#left-ad {
left:0;
}
#right-ad-a {
right:0;
}
/*======================全部左右广告结束==========================*/
* html {overflow:hidden; }
* html body{height:100%;overflow: auto; position:relative; }
* html #left-ad{position:absolute;left:0;}
* html #right-ad-a{position:absolute;right:17px;}
* html #left-ad,* html #right-ad-a{position:absolute;top:expression(eval(document.body.scrollTop + 50));}
我使用了上面的方法,基本实现,但是有个问题,就是右边的广告,当页面加载出来的时候,是正常的,但是一但滚动滚动条,这个广告自然隔右边滚动条17px,我是指在IE6下…
问题解决:给body加width:100%;
前两个在ie6下我测试是没有滚动条的，我是用multiple ie 测试的，不知各位有没有。后两个例子滚动条只有一半，而且是不符合xhtml了，说了这么多没一个能用的。我看还是用js得了
1、例1和例3无法效果的问题，我不知道楼上是否看到文中的这句话：“如果你安装了多个IE（包括绿色版本），条件注释将会以最高版本的IE为标准”。
2、例2和例4没有问题，我也是利用multiple ie下的ie6看的
3、不符合xhtml？不知道什么意思？
4、经验表明，如果一个页面效果能够用css合理实现，还是少用js吧。
如果页面上加个漂浮的广告，你就搞不定了。
不信的话你拿新浪网的首页做测试页试试看。
有时候觉得，这种技术行的小技巧，浪费了我们很多时间，
应该关注更主要的东西啊
秦歌: 页面有多个position:relative 如果往下滚动的话~ 其它的也会带动起来~ 我研究了一下午也没弄明白怎么回事~
感觉可能是你的嵌套的某些小细节没有搞好，有没有demo给我看看。
首先很感谢你的代码，但是我发现有个问题：
当把ie6正常大小显示时没有问题，当把ie6大小缩放较小的时候，滚动条就不见了，不知道怎么可以改正这个问题？谢谢。
秦歌~ 可否加你QQ 详说~
秦歌可否加你QQ~详说~
我也有同样问题：
我是用div的方法设置正文内容居中的。
#bodyid
{
text-align:center;
min-width:930px; /* 值与wrapper中width相同 */
}
#wrapper
{
/* 与bodyid配合实现布局居中。把内容都包在与
中间即可 */
margin:0 auto;
width:930px;
text-align:left; /* 重新定义布局中的文本为左齐 */
}
当把ie6全屏显示时没有问题，当把窗口缩放较小的时候，滚动条就不见了。
如果像“花随风落”的方法，在* html body中加width:100%;的话，当缩小窗口时有滚动条，但是最开始时右边的滚动条紧贴文本，不在窗口的最右边。要点一次“最大化”按钮，滚动条才到窗口最右边。并且在滚动时，间歇性出现滚动条紧贴文本的下方和右边，而不在窗口的最下方和最右边。
To 阳阳：你加我MSN吧，在“关于”页面有我的信息。
To 楼上：把你做的demo发给我吧，我需要知道你的DTD和具体使用环境，我的邮箱在“关于”里面有,。
放屁一样
没看懂
3Q CC~~
好文，希望更多人看到
晕 这回行了吧
<html>
<head>
<style type=”text/css”>
/* -**** just for X<=IE6 */
html {-overflow:hidden;-margin:0;-padding:0;}
body {-height:100%;-width:100%;-overflow:hidden;-margin:0;-padding:0;}
#box {-height:100%;-width:100%;-overflow:auto;-margin:0;-padding:0;}
/* fixed at left and top */
.fixedLT {
position: fixed; -position: absolute;
left: 0em;
top: 0em;
}
/* fixed at right and top*/
.fixedRT {
position: fixed; -position: absolute;
right: 0em; -right: expression(eval(box.offsetWidth – box.clientWidth));
top: 0em;
}
/* fixed at left and bottom */
.fixedLB {
position: fixed; -position: absolute;
left: 0em;
bottom: 0em; -bottom: expression(eval(box.offsetHeight – box.clientHeight));
}
/* fixed at right and bottom */
.fixedRB {
position: fixed; -position: absolute;
right: 0em; -right: expression(eval(box.offsetWidth – box.clientWidth));
bottom: 0em; -bottom: expression(eval(box.offsetHeight – box.clientHeight));
}
/* test browser */
#X {width:100px;float:left;background:red;-background:blue;}
#IE6 {width:100px;float:left;background:blue;-background:red;}
</style>
</head>
<body>
<!– to be fixed –>
<div class=”fixedRB” style=”color:yellow;”><div id=”X”>X&IE7+</div><div id=”IE6″>IE6-</div></div>
<!– virtual body –>
<div id=”box”>
oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<br/>
o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>o<br/>
</div>
</body>
</html>
哥们 不好意思 把你这里整乱套了 前两条删掉吧~~
好强大哦，崇拜！！！
[...] fixed元素的绝对位置是相对于HTML元素来说，滚动条是body元素的。(via，刚才竟然没找到来源，囧。) [...]
[...] fixed元素的绝对位置是相对于HTML元素来说，滚动条是body元素的。(via，刚才竟然没找到来源，囧。) [...]
Some interesting samples to fixed position:
position-fixed for all Browsers
position fixed for Internet Explorer 6
psoition fixed dhtml
内容不错，值得学习！
[...] 随网之舞的跨浏览器的CSS固定定位{position:fixed} 比起其他的解决方案，代码简短易懂，也不用改头部声明，强烈推荐！ 1 2 3 [...]
[...] fixed元素的绝对位置是相对于HTML元素来说，滚动条是body元素的。(via，刚才竟然没找到来源，囧。) [...]
十分感谢，找了好久。。。
太棒了，学习了
就这么几句话，怎么就罗里罗嗦，说不通顺呢？
[...] fixed元素的绝对位置是相对于HTML元素来说，滚动条是body元素的。(via，刚才竟然没找到来源，囧。) [...]
好啊好啊，找这个头疼的问题很久了！谢了！
[...] 要是只需要使用 CSS 就能解决该问题, 那就完美了. 方法总是有的: http://dancewithnet.com/2007/04/19/cross-brower-css-fixed-position/给了我们趋于完美的解决方案. [...]
[...] 在别的文章中看到，可以用position:absolute;来解决IE6的问题，不过，添加position:absolute;之后，依然没有成功。当然，最终，还是用position:absolute;来解决。只是，不一定能成功。因为，有一句非常重要的话需要理解。 fixed元素的绝对位置是相对于HTML元素来说，滚动条是body元素的。(via，刚才竟然没找到来源，囧。) [...]
感谢，解决了我一个问题。
IE6 永远的痛
如果页面上有多个绝对或者相对定位的DIV时，其他DIV就会出问题了。这只是适合页面只有这一个定位元素时使用吧。
[...] 来源：随网之舞 [...]
很好，一行代码解决问题！谢谢！
[...] 然后我就遇到了，臭名昭著的IE6的bug！然后，我就找到了一下两篇文章。 跨浏览器的CSS固定定位{position:fixed} 修正IE6不支持position:fixed的bug 最终我采用了以下的方式： ?View Code [...]
角落的top很喜欢···· 能拿走么！？嘿嘿
[...] IE < 7 支持 position:fixed 的通用方法 跨浏览器的CSS固定定位{position:fixed} 相关推荐:左浮动元素在IE6中双倍margin-left [...]
position fixed 后怎么就错位了呢？
position fixed 在各方属性 IE 6 不支持啊。
楼主，你好啊，为什么，在wrapper里加上#wrapper{position:relative;},就解决了，其他可以用绝对定位问题啊，还有，我不在wapper定义{position:relative;},而是在wapper 包含的仔div 里定义{position:relative;},，为什么又不行了，
如果页面上有多个绝对或者相对定位的DIV时，其他DIV就会出问题了。这只是适合页面只有这一个定位元素时使用吧。
呵呵 07年的文章，现在还这么火啊！膜拜中
这样子IE6可以了,火狐又不行了。
fixed 和 absolute什么区别呢？博主