您的位置：首页 > Web前端 > CSS

用css固定div层在页面顶部和底部（兼容IE6）

2013-04-26 16:25 621 查看
这是关于实现css固定div层在页面顶部,css固定div层在页面底部的代码，兼容IE6

有时需要把一个元素固定在页面的某个部位，一般的解决方法是：

<div class="box"></div>

.box{
position:fixed;bottom:0;right:10px;
}

让元素固定在浏览器的底部和距离右边的10个像素。一般的浏览器都支持这种方法，但是ie6不支持fixed

解决办法：


.box{

osition:fixed;
_position:absolute;
bottom:0;
right:10px;
_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
)))


}

使元素固定在浏览器的顶部：

.box
{
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}


使元素固定在浏览器的底部：

.
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)));
}


这两段代码只能实现在最底部跟最顶部，你可以使用 
_margin-top:10px;
 或者
_margin-bottom:10px;
 修改其中的数值控制元素的位置。

在ie中你会发现[b]被固定定位的元素在滚动滚动条的时候会闪动[/b]

解决的方法是：

*html{ 

background-image:url(about:blank);  /*使用空背景*/


background-attachment:fixed;  /*固定背景*/


}

这样ie6中不支持fixed问题算是解决了。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航