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

这是关于实现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中你会发现被固定定位的元素在滚动滚动条的时候会闪动

解决的方法是:

*html{

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

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

}

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

转载于:https://www.cnblogs.com/yangjinjin/archive/2013/04/26/3045115.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值