HTML中滚动条滚动时如何让上面的标题固定不动

16 篇文章 0 订阅

在做web前端开发时,有时候需要滚动条滚动时让上面的标题固定不动。如果一开始在设计阶段html元素的层次结构是对的,通过在不同的节点设置overflow就很容易实现。

但是有时候一开始的层次结构设计的不能满足让标题固定不动,如果调整层次结构又会改动很多文件。例如一开始,标题并没有单独放在一个div里,而是按左右设计的,并且是在2个不同的模板文件里。这时要实现上述需求,在不改动大的层次结构时,只能在标题上的css做文章了。

为了让标题固定不动,我们把标题那块的div的position设置成fixed。然后把相应的坐标设置正确,例如left,right,top之类。为了标题在滚动条滚动时,标题不被下面的容器覆盖,需要把标题的z-index的数值设置的更大一点。

position:fixed;

top:78px;

z-index:1;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值