css固定元素位置(fixed)

咱们常常碰到的需求是但愿页面某个元素固定在浏览器的一个位置，不管如何滚动滚动条，位置不变，就例如常常看到的弹出广告。方法通常是使用js控制，或者使用css。这里我写的是css的控制方法。

在IE7以上版本及firefox、opera、safari里，都支持css属性"position:fixed"，它的做用就是将元素相对于窗口固定位置。代码以下

#ads{
    position:fixed;
    right:0;
    bottom:0;
    border:1px solid red;
    width:300px;
    height:250px;
}

咱们定义一个#ads的id样式，并给他设了高度宽度，经过position:fixed以及right、bottom将元素定位在窗口右下角。

可是在IE6下，并不支持position:fixed属性，这个时候咱们须要对IE6进行hack处理。解决的方案是使用 postion:absolute属性，它的做用你们都很熟悉，相对于父元素进行绝对定位，而后咱们能够经过expression来改变#ads的top 值。

PS expression的定义：IE5及其之后版本支持在CSS中使用expression，用来把CSS属性和Javas cript 表达式关联起来，这里的CSS属性能够是元素固有的属性，也能够是自定义属性。就是说CSS属性后面能够是一段Javas cript表达式，CSS属性 的值等于Javas cript表达式计算的结果。 在表达式中能够直接引用元素自身的属性和方法，也可使用其余浏览器对象。这个表达式就好像是在这个 元素的一个成员函数中同样。

因此咱们能够经过在css里计算javascript值来改变top值，代码以下：

#ads{
    _position:absolute;
    _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
}

彷佛一切都完美了，可是咱们在IE6下运行的时候会发现，随着滚动条的移动，咱们的这个#ads朋友他会抖动。解决方法也很简单，只要在body里加一点点的css，以下：

body{
    background-image:url(about:blank); /* for IE6 */ 
    background-attachment:fixed; /*必须*/
}

好啦，完工！！！！！！！！！！！！！！！！！！！！！！！！

有木有！！！！！！！！！！！！！！！！！！！！！！！！

PS:本来使用的是"url(text.txt)",可是txt这个是不存在的，http请求报404错误，致使影响加载速度，参考了网上的一些写法，使用about:blank能够达到相同目的。

原理听说是ie6不支持fixed 而其样式背景却支持fixed，经过背景来此消彼长消除抖动，望大牛指教。

完整的代码：

body{
    background-image:url(about:blank); /* for IE6 */ 
    background-attachment:fixed; /*必须*/
}
#ads{
    width:300px;
    height:250px;
    position:fixed;
    right:0;
    bottom:0;
    _position:absolute;
    _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
    border:1px solid red;
}