您的位置: 首页  >  IT文章  >  CSS兑现将div固定在页面指定地方

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

分类: IT文章 • 2022-09-02 09:27:17
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 >   

 

效果非常好，呵呵。

相关推荐