CSS固定定位{position:fixed}
来自：http://www.csharpwin.com/dotnetspace/10790r7213.shtml
某个元素始终位于浏览器的底部或某些地方
不知道您是否留意了，浏览http://dancewithnet.com时，浏览器右下角有一个标着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浏览器）<!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" /> <title>Fixed Position之IE条件注释解决方案 @随网之舞</title> <meta name="description" content="IE7、Firefox、Opera，都支持CSS的{position:fixed},IE6不支持该属性，但是在使用!DOCTYPE 声明指定standards-compliant（标准）模式可以通过CSS hack实现。IE5和IE5.5可以通过IE特有的expression在CSS中实现。" /> <meta name="keywords" content="position:fixed,css,ie hack,固定定位,跨浏览器,多浏览器" /> <mce:style type="text/css"><!-- *{margin:0;padding:0;} body{background:#242424;color:#ccc;font-family:Verdana, Arial, Helvetica, sans-serif;line-height:150%;} h1{text-align:center;line-height:200%;} h3{text-indent:1em;line-height:160%;color:#666;font-weight:normal;font-size:1em;} h3 a{color:#bbb; text-decoration:none;margin:0 0.5em;} h3 a:hover{color:#fff;} code{display:block;margin:0.5em;border:1px solid #282828;padding:1em;background:#222;color:#888;font:1em Fixedsys;} code span{color:#666;font-family:Verdana;} ul{margin:1em;} #fixed{position:fixed;top:5em;right:0;background:#fff;color:#000;} --></mce:style><style type="text/css" mce_bogus="1">*{margin:0;padding:0;} body{background:#242424;color:#ccc;font-family:Verdana, Arial, Helvetica, sans-serif;line-height:150%;} h1{text-align:center;line-height:200%;} h3{text-indent:1em;line-height:160%;color:#666;font-weight:normal;font-size:1em;} h3 a{color:#bbb; text-decoration:none;margin:0 0.5em;} h3 a:hover{color:#fff;} code{display:block;margin:0.5em;border:1px solid #282828;padding:1em;background:#222;color:#888;font:1em Fixedsys;} code span{color:#666;font-family:Verdana;} ul{margin:1em;} #fixed{position:fixed;top:5em;right:0;background:#fff;color:#000;}</style> <!--[if IE 6]> <mce:style type="text/css"><!-- html{overflow:hidden;} body{height:100%;overflow:auto;} #fixed{position:absolute;right:17px;} --></mce:style><style type="text/css" mce_bogus="1">html{overflow:hidden;} body{height:100%;overflow:auto;} #fixed{position:absolute;right:17px;}</style> <![endif]--> <!--[if lt IE 6]> <mce:style type="text/css"><!-- #fixed{position:absolute;top:expression(eval(document.body.scrollTop + 50));} --></mce:style><style type="text/css" mce_bogus="1">#fixed{position:absolute;top:expression(eval(document.body.scrollTop + 50));}</style> <![endif]--> </head> <body> <div id="wrapper"> <h1>Fixed Position之IE条件注释解决方案 </h1> <h3><a href="http://dancewithnet.com/2007/04/19/cross-brower-css-fixed-position/" mce_href="http://dancewithnet.com/2007/04/19/cross-brower-css-fixed-position/">说明</a>|<a href="http://dancewithnet.com/2007/04/19/cross-brower-css-fixed-position/#comments" mce_href="http://dancewithnet.com/2007/04/19/cross-brower-css-fixed-position/#comments">评论</a></h3> <pre><code> <!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> <span>......</span> <style type="text/css"> #fixed{position:fixed;top:5em;right:0;<span>......</span>} <span>针对IE7、Opera、Firefox一行搞定</span> </style> <span>IE6中利用容器对溢出内容的处理方式来实现的</span> <!--[if IE 6]> <span>利用IE独有的条件语句可以针对不同的IE版本精确设置，同时避免了这些代码被其他浏览器读到</span> <style type="text/css"> html{overflow:hidden;} body{height:100%;overflow:auto;} #fixed{position:absolute;right:17px;} <span>fixed元素的绝对位置是相对于HTML元素来说，而滚动条是body元素的，这是设置right:17px的原因</span> </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"> <span>......</span> </div> <div id="fixed"><h2>{position:fixed}</h2></div> </body> </html> </code></pre> <ul> <li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li> </ul> </div> <div id="fixed"><h2>{position:fixed}</h2></div> <mce:script src="http://www.google-analytics.com/urchin.js" mce_src="http://www.google-analytics.com/urchin.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- _uacct = "UA-300049-1"; urchinTracker(); // --></mce:script> </body> </html>
代码示例2：（多个IE，通过条件注释+CSS hack区分IE浏览器，明显的比纯粹条件注释复杂且不易读，放上来主要是便于同个PC拥有多个IE浏览器朋友[一般应该做是web开发的]可以直接看到效果，下同。）
<!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" /> <title>Fixed Position 之条件注释 + CSS Hack解决方案 @随网之舞</title> <meta name="description" content="通过条件注释+CSS hack区分IE浏览器，明显的比纯粹条件注释复杂且不易读，放上来主要是便于同个PC拥有多个IE浏览器朋友[一般应该做是web开发的]可以直接看到效果" /> <meta name="keywords" content="position:fixed,css,ie hack,固定定位,跨浏览器,多浏览器" /> <mce:style type="text/css"><!-- *{margin:0;padding:0;} body{background:#242424;color:#ccc;font-family:Verdana, Arial, Helvetica, sans-serif;line-height:150%;} h1{text-align:center;line-height:200%;} h3{text-indent:1em;line-height:160%;color:#666;font-weight:normal;font-size:1em;} h3 a{color:#bbb; text-decoration:none;margin:0 0.5em;} h3 a:hover{color:#fff;} code{display:block;margin:0.5em;border:1px solid #282828;padding:1em;background:#222;color:#888;font:1em Fixedsys;} code span{color:#666;font-family:Verdana;} ul{margin:1em;} #fixed{position:fixed;top:5em;right:0;background:#fff;color:#000;} --></mce:style><style type="text/css" mce_bogus="1">*{margin:0;padding:0;} body{background:#242424;color:#ccc;font-family:Verdana, Arial, Helvetica, sans-serif;line-height:150%;} h1{text-align:center;line-height:200%;} h3{text-indent:1em;line-height:160%;color:#666;font-weight:normal;font-size:1em;} h3 a{color:#bbb; text-decoration:none;margin:0 0.5em;} h3 a:hover{color:#fff;} code{display:block;margin:0.5em;border:1px solid #282828;padding:1em;background:#222;color:#888;font:1em Fixedsys;} code span{color:#666;font-family:Verdana;} ul{margin:1em;} #fixed{position:fixed;top:5em;right:0;background:#fff;color:#000;}</style> <!--[if IE]> <mce:style type="text/css"><!-- * html #fixed{position:absolute;right:1px;top:expression(eval(document.body.scrollTop + 50));} * html/**/{overflow:hidden;} * html body/**/{height:100%;overflow:auto;} * html #fixed/**/{right:17px;top:5em;} * html #fixed/**/{/**/right /**/:1px;/**/top /**/:expression(eval(document.body.scrollTop + 50));} --></mce:style><style type="text/css" mce_bogus="1">* html #fixed{position:absolute;right:1px;top:expression(eval(document.body.scrollTop + 50));} * html/**/{overflow:hidden;} * html body/**/{height:100%;overflow:auto;} * html #fixed/**/{right:17px;top:5em;} * html #fixed/**/{/**/right /**/:1px;/**/top /**/:expression(eval(document.body.scrollTop + 50));}</style> <![endif]--> </head> <body> <div id="wrapper"> <h1>Fixed Position 之条件注释 + CSS Hack解决方案 </h1> <h3><a href="http://dancewithnet.com/2007/04/19/cross-brower-css-fixed-position/" mce_href="http://dancewithnet.com/2007/04/19/cross-brower-css-fixed-position/">说明</a>|<a href="http://dancewithnet.com/2007/04/19/cross-brower-css-fixed-position/#comments" mce_href="http://dancewithnet.com/2007/04/19/cross-brower-css-fixed-position/#comments">评论</a></h3> <pre><code> <!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> <span>......</span> <style type="text/css"> #fixed{position:fixed;top:5em;right:0;<span>......</span>} <span>针对IE7、Opera、Firefox一行搞定</span> </style> <span>IE6中利用容器对溢出内容的处理方式来实现的</span> <!--[if IE 6]> <span>利用IE独有的条件语句可以针对不同的IE版本精确设置，同时避免了这些代码被其他浏览器读到</span> <style type="text/css"> html{overflow:hidden;} body{height:100%;overflow:auto;} #fixed{position:absolute;right:17px;} <span>fixed元素的绝对位置是相对于HTML元素来说，而滚动条是body元素的，这是设置right:17px的原因</span> </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"> <span>......</span> </div> <div id="fixed"><h2>{position:fixed}</h2></div> </body> </html> </code></pre> <ul> <li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li> </ul> </div> <div id="fixed"><h2>{position:fixed}</h2></div> <mce:script src="http://www.google-analytics.com/urchin.js" mce_src="http://www.google-analytics.com/urchin.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- _uacct = "UA-300049-1"; urchinTracker(); // --></mce:script> </body> </html>
或许有人像我一样，在!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浏览器）<?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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Fixed Position 之 XML Prolog问题的条件注释和CSS Hack @随网之舞</title> <meta name="description" content="使用多IE浏览器用户能看到Fixed Position 之 XML Prolog问题的解决方案" /> <meta name="keywords" content="position:fixed,css,ie hack,固定定位,跨浏览器,多浏览器" /> <mce:style type="text/css"><!-- *{margin:0;padding:0;} body{background:#242424;color:#ccc;font-family:Verdana, Arial, Helvetica, sans-serif;line-height:150%;} h1{text-align:center;line-height:200%;} h3{text-indent:1em;line-height:160%;color:#666;font-weight:normal;font-size:1em;} h3 a{color:#bbb; text-decoration:none;margin:0 0.5em;} h3 a:hover{color:#fff;} code{display:block;margin:0.5em;border:1px solid #282828;padding:1em;background:#222;color:#888;font:1em Fixedsys;} code span{color:#666;font-family:Verdana;} ul{margin:1em;} #fixed{position:fixed;top:5em;right:0;background:#fff;color:#000;} --></mce:style><style type="text/css" mce_bogus="1">*{margin:0;padding:0;} body{background:#242424;color:#ccc;font-family:Verdana, Arial, Helvetica, sans-serif;line-height:150%;} h1{text-align:center;line-height:200%;} h3{text-indent:1em;line-height:160%;color:#666;font-weight:normal;font-size:1em;} h3 a{color:#bbb; text-decoration:none;margin:0 0.5em;} h3 a:hover{color:#fff;} code{display:block;margin:0.5em;border:1px solid #282828;padding:1em;background:#222;color:#888;font:1em Fixedsys;} code span{color:#666;font-family:Verdana;} ul{margin:1em;} #fixed{position:fixed;top:5em;right:0;background:#fff;color:#000;}</style> <!--[if IE]> <mce:style type="text/css"><!-- *html body{overflow:hidden;} *html #wrapper{height:100%;overflow:auto;} *html #fixed{position:absolute;right:17px;} --></mce:style><style type="text/css" mce_bogus="1">*html body{overflow:hidden;} *html #wrapper{height:100%;overflow:auto;} *html #fixed{position:absolute;right:17px;}</style> <![endif]--> </head> <body> <div id="wrapper"> <h1>Fixed Position 之 XML Prolog问题的条件注释和CSS Hack</h1> <h3><a href="http://dancewithnet.com/2007/04/19/cross-brower-css-fixed-position/" mce_href="http://dancewithnet.com/2007/04/19/cross-brower-css-fixed-position/">说明</a>|<a href="http://dancewithnet.com/2007/04/19/cross-brower-css-fixed-position/#comments" mce_href="http://dancewithnet.com/2007/04/19/cross-brower-css-fixed-position/#comments">评论</a></h3> <pre><code> <?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> <span>......</span> <!--[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"> <span>......</span> </div> <div id="fixed"><h2>{position:fixed}</h2></div> </body> </html> </code></pre> <ul> <li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li> </ul> </div> <div id="fixed"><h2>{position:fixed}</h2></div> <mce:script src="http://www.google-analytics.com/urchin.js" mce_src="http://www.google-analytics.com/urchin.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- _uacct = "UA-300049-1"; urchinTracker(); // --></mce:script> </body> </html>对比两个纯粹的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的下场。