不知道您是否留意了，浏览本站时，浏览器右下角有一个标着top的黑色直角三角形，可以点击它返回到正在浏览的网页页眉。当滚动网页时，它的位置一直没有任何改变，您感觉它怎么样？这就是通过CSS的定位属性{position:fixed}来实现的，通过它可以让HTML元素脱离文档流固定在浏览器的某个位置。
1.IE7、Firefox、Opera，都支持CSS的{position:fixed}，所以很容易实现（《详解定位与定位应用》）
2.IE6不支持该属性，但是在使用!DOCTYPE 声明指定standards-compliant（标准）模式可以通过CSS hack实现
3.上述声明下IE5和IE5.5目前没有发现通过纯粹CSS能够解决的方案，但是可以通过IE特有的expression在CSS中实现（移动网页时固定元素会动），这和常见浮动Logo广告利用Javascript实现原理是一样的，只不过可以直接写在CSS中比较简便的
4.利用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的下场。
分享到：
相关推荐
在网页设计中，实现元素的固定定位（Fixed Positioning）是一项常见的需求，它可以使元素相对于浏览器窗口保持固定的位置，无论用户滚动页面如何，该元素总是在屏幕的特定位置。`position: fixed` 是 CSS 中的一个...
`position: fixed`在现代浏览器中用于创建固定定位元素，使得元素相对于视口（viewport）保持固定位置，即使在滚动页面时也不会移动。然而，在IE6中，这个特性并未得到良好的支持。 为了在IE6下实现类似的效果，...
总的来说，`position_fixed`主题涵盖了网页设计中的固定定位技术，特别是如何在不支持`position: fixed;`的旧版浏览器（如IE6）中实现相同效果的策略。这包括使用JavaScript补丁、条件注释以及可能的CSS hack，确保...
position:fixed表示元素相对于浏览器窗口进行定位，这意味着无论页面如何滚动，元素都将保持在指定的位置。与之相对的是position:absolute，它会将元素定位在最近的已定位祖先元素中，如果没有则相对于初始包含块...
在网页设计中，CSS的`position:fixed`属性通常用于创建元素的固定定位，使得元素在页面滚动时始终保持在屏幕的某个位置。然而，当页面存在水平滚动条时，`position:fixed`元素仅能实现垂直方向的固定，而无法实现...
在网页设计中，CSS的定位属性position: fixed经常被用来创建固定在页面上的元素，如顶部导航栏。而margin属性则用来给元素添加外边距。当这两个属性共同作用于同级元素时，可能会遇到一些布局上的问题。本文探讨了在...
`position:fixed`是一个非常重要的CSS属性，它使得元素在页面上保持固定的位置，不随滚动条滚动，常用于创建固定顶部导航、侧边栏等。然而，在Internet Explorer 6（简称IE6）这个古老且具有很多兼容性问题的浏览器...
iOS 中 position:fixed 吸底时的滑动出现抖动的解决方案 iOS 中 position:fixed 吸底时的滑动出现抖动是前端开发中常见的问题之一。这个问题的出现主要是由于 native 和 h5 两个原因引起的抖动。native 的抖动是...
在示例代码中，若只有`position: fixed`而没有边位移，浏览器会默认将元素放在其在`static`定位下的原始位置，这实际上与期望的固定定位效果相悖。由于没有明确的偏移值，元素可能会覆盖其他内容或者出现在不可预期...
在微信小程序开发中，`position:sticky` 是一个非常实用的CSS样式，它结合了`position:relative`和`position:fixed`的特点，用于创建元素的粘性定位。这个特性允许元素在滚动到特定位置时固定在屏幕的某个位置，从而...
IE6浏览器对CSS中的固定定位（position: fixed）不支持，这是一个众所周知的问题。IE6以及其他一些旧版本的浏览器，比如IE7和IE8，在文档处于怪异模式（quirk mode）时，会将position: fixed视为错误值，并将其忽略...
由于IE6不完全支持CSS的`position: fixed`，开发者通常需要使用JavaScript库如jQuery或特定的CSS hack来模拟固定定位的效果，以确保在旧版浏览器中也能正常显示。 在这个压缩包中包含的"lightbox测试.html"文件可能...
在页面滚动过程中，当元素距离其父元素达到设定阈值（如`top: 100px`）时，`position: sticky`会使元素变为固定定位，保持在屏幕的特定位置。这一特性在构建响应式布局，特别是创建如导航栏等始终保持可见的元素时...
需要注意的是，上述方法中提到的margin:auto不能直接应用于固定定位的元素来实现居中，它是用于相对定位或绝对定位元素的一种居中方式。对于fixed定位的元素，应使用上述提到的top、left结合margin负值的技巧，或者...
在网页设计中，`position:fixed` 是一种CSS定位方式，它允许元素相对于浏览器窗口进行定位，而不是相对于其父元素。这种定位模式在创建固定头部、侧边栏或浮动导航栏时非常有用，因为无论用户如何滚动页面，这些元素...
`是一个非常有用的CSS属性，它可以使元素相对于浏览器窗口保持固定位置，无论滚动条如何滚动，该元素都会停留在屏幕的特定位置。然而，在Internet Explorer 6 (IE6)这个古老的浏览器中，`position: fixed;`并不完全...
在网页设计中，`position: fixed` 是一种常用的CSS定位方式，它可以将元素固定在视口的某个位置，即使页面滚动，该元素也会保持在屏幕的特定位置。然而，有些老旧的浏览器或特殊环境下可能不支持 `position: fixed`...
`position:fixed`通常用于创建固定定位的元素，使其在页面滚动时始终保持在屏幕的特定位置。然而，在IE6中，这个属性并未正确实现，导致元素无法按照预期固定在窗口的位置。 描述中提到，有人询问如何通过CSS在不...
` 是CSS定位属性之一，它可以使元素相对于浏览器窗口进行定位，无论滚动条如何移动，元素始终保持在屏幕的某个位置。但在 `iframe` 中，由于浏览器的安全策略和渲染机制，`fixed` 定位可能不会按照预期工作。这通常...