在網頁設計中,時常要用到把某個元素始終定位在屏幕上,即使滾動瀏覽器窗口也不會發生變化。
一般我們會使用position:fixed來進行絕對固定,但IE6并不支持position:fixed屬性,所以必須對IE6進行”特殊照顧”。
我們想要把元素定位在瀏覽器的底部
<div class="box"></div><div class="content"></div>
.box{background:#69C;height:60px;width:500px;position:fixed;left:0;bottom:0;}.content{height:5000px;/*使內容足夠長,方便查看滾屏效果*/background:#9CF;}
此刻在火狐中已經正常了,接下來為IE6增加一些針對性的代碼,在box中加入
_position:absolute;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
現在IE6中已經實現固定定位的效果了,但是移動滾動條時,會出現閃屏,所以還需要在box中加入
*html{background-image:url(about:blank);background-attachment:fixed;}
定位的位置left和right可以用絕對定位的方法解決,所以上面加了專門針對IE6的絕對定位
_position:absolute;而 top 跟 bottom 就需要用上面的表達式來實現。
如果想要把box元素定位在瀏覽器的頂部,只需要修改_top的值,代碼如下
_top:expression(eval(document.documentElement.scrollTop));
如果希望box元素不是位于最頂部,也不是位于最底部,你可以使用 _margin-top:30px;或_margin-bottom:30px;修改其中的數值來控制元素的位置。
IE6不支持position:fixed;的問題已經徹底解決了,想要更深入的理解,就多動動手吧!
新聞熱點
疑難解答