fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

但是在IE6下,并不支持position:fixed属性,这个时候我们需要对IE6进行hack处理。解决的方案是使用postion:absolute属性,它的作用大家都很熟悉,相对于父元素进行绝对定位,然后我们可以通过expression来改变#ads的top值。

什么是expression?
expression的定义:IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式,CSS属性的值等于Javascript表达式计算的结果。在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

重要代码如下:(注意css中对IE6兼容的处理)

/* 实例CSS */
html{ _background:url(about:blank);} /*阻止闪动 in IE6 , 把空文件换成about:blank , 减少请求*/
body{ font-size:12px; font-family:Arial,Tahoma,sans-serif; color:#EEEEEE; text-align:center; background:#E2E2E2;}
#header{
    width:100%;
    height:80px;
    line-height:80px; 
    background:#333
}
#topToolbar{
    _display:none;
    width:100%;
    height:40px;
    line-height:40px;
    background:#333;
    position:fixed;
    top:-40px;
    left:0;
    _top:0;
    _position:absolute;
    _top:expression(documentElement.scrollTop);
}
#content{
    border:1px solid #f00;
    width:880px;
    height:1390px;
    margin:auto
}
#bottomToolbar{
    width:100%;
    height:40px;
    line-height:40px;
    background:#333;
    position:fixed;
    bottom:0;
    left:0;
    _position:absolute;
    _top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);
    /*
        document.body.scrollTop 网页滚动的距离
        document.body.clientHeight 网页可见区域高
        this.offsetHeight 当前元素的高度
    */
}
网页导航条设计
来源:http://www.huiyi8.com/daohang/daohangtiao/