CSS实现将div固定在页面指定地方

最新推荐文章于 2024-08-19 21:39:42 发布

xieyaa

最新推荐文章于 2024-08-19 21:39:42 发布

阅读量1.1w

点赞数 3

分类专栏： CSS 文章标签： div css scroll class border html

本文链接：https://blog.csdn.net/xieyaa/article/details/4363981

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用一个div作为提示信息或者与用户交互的层控件，需要让它随着页面的滚动而固定在屏幕的某个地方。js可以实现这个功能，当页面滑动的时候，计算位置，然后改变div的top属性即可。但是这样作出来的效果，恐怕没人会满意，因为抖的太厉害了，不能很及时的改变位置。

要是能做到平滑的，一点都看不出来的技术来达到这种效果，恐怕只有css了。

<html> <head> <title></title> <style type="text/css"> html,body { overflow:hidden; margin:0px; width:100%; height:100%; } .virtual_body { width:100%; height:100%; overflow-y:scroll; overflow-x:auto; } .fixed_div { position:absolute; z-index:2008; bottom:20px; left:40px; width:800px; height:40px; border:1px solid red; background:#e5e5e5; } </style> </head> <body> <div class="fixed_div">I am still here!</div> <div class="virtual_body"> <div style="height:1800px;"> I am content ! </div> </div> </body> </html>

效果非常好，呵呵。