如何让一个层始终显示在网页的固定位置

析:遇到这个问题的时候我们总是第一时间想到用一个浮动的DIV,然后通过JavaScript控制window.onscroll来控制DIV的位置,从而达到我们希望这个层在页面的固定位置

但是这种方式有一个缺点,那就是我们在滑动鼠标的时候,层会跟着鼠标的滚动而抖动,为了避免这个情况的发生,可以用下面的方式实现!

1.放一个大的层,长和宽都是100%,并且是浮动的,超出的部分(overflow)用auto.

2.再放一个小的层,也是浮动的,而且z-index为最大,让它始终在最上面,我们可以通过控制这个层的top,left,right,botton来控制层在网页中的具体位置

3.设置body的margin为0,否则我们将看不完滚动条

4.设置body的scroll为no,让窗体没有滚动条,而层来显示滚动条

5.所有网页其他的内容都放在大层里面

具体代码如下:

<html>
<head>
    <title></title>
    <style>
        body{ margin:0px; }
        div { position: absolute; }
    </style>
</head>
<body scroll="no">   
    <div style="width: 100%; height: 100%; overflow: auto;">
        这里写网页的其他
    </div>
    <div style="background-color:Red; z-index: 1; bottom:0px; right:0px;">
        这个层始终在顶部
    </div>
</body>
</html>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值