[技巧心得] 浮动固定于顶部,固定于中部,固定于底部css代码

解决IE6中闪动问题

*{background-image:url(about:blank);background-attachment:fixed;}
body{
	background-image:url(about:blank);background-attachment:fixed;
	background-color: #e3d8c6;
}
或下方

html{ /*这个可以让IE6下滚动时无抖动*/background: url(about:black) no-repeat fixed}

浮动固定于顶部

  1. .doc-hd-outer{background:#000;height:40px;position:fixed;_position:absolute;top:0;left:0;width:100%;z-index:100;
  2. _top:expression(eval(document.compatMode&&document.compatMode=='CSS1Compat')?documentElement.scrollTop:document.body.scrollTop);
  3. }
复制代码

固定于中部


  1. .doc-hd-outer{position:fixed;top:50%;margin-top:-20px;_margin-top:0;_position:absolute;_top:expression(eval(document.compatMode&&document.compatMode=='CSS1Compat')?documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2:document.body.scrollTop +(document.body.clientHeight - this.clientHeight)/2);display:block;width:100%;left:0;background:#000;height:40px;z-index:999}
复制代码

固定于底部


  1. .doc-hd-outer{position:fixed;bottom:0;_position:absolute;_top:expression(eval(document.compatMode&&document.compatMode=='CSS1Compat')?documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight):document.body.scrollTop +(document.body.clientHeight - this.clientHeight));display:block;width:100%;left:0;background:#000;height:40px;z-index:999}
复制代码
 

底部固定

#boxA{
    position: fixed;
    z-index: 999;
    bottom: 0px;
    left: 0px;
    _position:absolute;
    _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
    overflow:hidden; 
    *zoom:1;
}

 

右侧距底部30px固定

#boxB{
    position: fixed;
    z-index: 999;
    bottom: 30px;
    right: 0;
    _position:absolute;
    _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight + 30);
    overflow:hidden; 
    *zoom:1;
}

右侧距顶部45px固定

#boxC{
    position: fixed;
    z-index: 999;
    top: 45px;
    right: 0;
    _position:absolute;
    _top:expression(documentElement.scrollTop + 45);
    overflow:hidden; 
    *zoom:1;
}




  left:75px;;
    top:10px;/*FF IE7*/
    z-index:9999;
    position:fixed!important;/*FF IE7*/
    position:absolute;/*IE6*/
    _top:       expression(eval(document.compatMode &&
    document.compatMode=='CSS1Compat') ?
    documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
    document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

转载于:https://www.cnblogs.com/zhp404/articles/4152775.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值