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

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

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

 

 

[xhtml:showcolumns] view plain copy

·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150

1. < html >   
2. < head >   
3.     < title > </ title >   
4.     < style   type = "text/css" >    
5.        html,body {  
6.             overflow:hidden;  
7.             margin:0px;  
8.             width:100%;  
9.             height:100%;  
10.         }  
11.   
12.         .virtual_body {  
13.             width:100%;  
14.             height:100%;  
15.             overflow-y:scroll;  
16.             overflow-x:auto;  
17.         }  
18.   
19.         .fixed_div {  
20.             position:absolute;  
21.             z-index:2008;  
22.             bottom:20px;  
23.             left:40px;  
24.             width:800px;  
25.             height:40px;  
26.             border:1px solid red;  
27.             background:#e5e5e5;  
28.         }  
29.     </ style >   
30. </ head >   
31.   
32. < body >   
33. < div   class = "fixed_div" > I am still here! </ div >   
34. < div   class = "virtual_body" >   
35.     < div   style = "height:1800px;" >   
36.         I am content !  
37.     </ div >   
38. </ div >   
39. </ body >   
40. </ html >   

 

效果非常好，呵呵。