position:fixed

在淘宝的列表页上有个列表排序的工具条，这个工具条默认显示是正常的，如图

，当滚动条往下拖动到该工具条的时候，改工具条就会始终固定在浏览器的顶部，就是position:fixed效果。

如图：

在当滚动条往上拖动的时候就会恢复原样，（可能表述不清楚，大家上淘宝自己去看吧。）

以前很讨厌这个效果，不习惯。最近感觉这样的工具条效果还真不错。所以今天尝试的自己弄了一个效果。

主要实现思路：在拖动滚动条的时候比较滚动条卷掉的高度和该工具条元素的Y坐标的值，如果滚动条卷掉的高度大于该工具条元素的Y坐标的值，那么将该工具条元素设置成position:fixed。继续阅读：一个类似淘宝固定工具条的效果»

标签：position:fixed分类：JS

【IE6 BUG大全】position:fixed在IE6下的实现

时间：2009年03月26日作者：愚人码头查看次数:8,166 views评论次数：2

 

Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。我们下面来共同学习它们的不同的用法，在学习中我们应该去思考在什么布局情况下，应该使用它们其中的哪一种。

 

值	描述
static	默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。
relative	位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 “left:20″ 会将元素移至元素正常位置左边 20 个像素的位置。
absolute	位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。
fixed	位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。

 

position:static　无定位
该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。
如：#nav{position:static;}
这个定位属性值是什么意思呢？元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。例如，它允许框架样式布局。在页式媒体如打印输出中，一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果，但大都数效果不是通过CSS来实现了，而是应用了JS脚本。

其他两种前面提过，我们 主要说的是fixed

position:fixed　相对于窗口的固定定位

请特别注意，IE6及以下不支持CSS中的position:fixed属性。真的非常遗憾，所以我们只能通过JS模拟和CSS Hack等方法来实现。

1.IE条件注释解决方案：

demo： http://www.css88.com/demo/position_fixed/POSITION_fixed2.html