CSS实现将div固定在页面指定地方
用一个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>
效果非常好,呵呵。
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18