Wednesday, September 8, 2010

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>  

效果非常好，呵呵。




转自：http://blog.csdn.net/xieyaa/archive/2009/07/20/4363981.aspx
发贴者 YAO Luxin 时间： 21:37
标签：

0 评论:

Post a Comment