首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

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

2012-11-10 
CSS实现将div固定在页面指定地方??? 用一个div作为提示信息或者与用户交互的层控件,需要让它随着页面的滚

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

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

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

?

?

[xhtml:showcolumns] view plaincopy·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150
  1. <html>??<head>??
  2. ????<title></title>??????<style?type="text/css">???
  3. ???????html,body?{??????????????overflow:hidden;??
  4. ????????????margin:0px;??????????????width:100%;??
  5. ????????????height:100%;??????????}??
  6. ??????????.virtual_body?{??
  7. ????????????width:100%;??????????????height:100%;??
  8. ????????????overflow-y:scroll;??????????????overflow-x:auto;??
  9. ????????}????
  10. ????????.fixed_div?{??????????????position:absolute;??
  11. ????????????z-index:2008;??????????????bottom:20px;??
  12. ????????????left:40px;??????????????width:800px;??
  13. ????????????height:40px;??????????????border:1px?solid?red;??
  14. ????????????background:#e5e5e5;??????????}??
  15. ????</style>??</head>??
  16. ??<body>??
  17. <div?class="fixed_div">I?am?still?here!</div>??<div?class="virtual_body">??
  18. ????<div?style="height:1800px;">??????????I?am?content?!??
  19. ????</div>??</div>??
  20. </body>??</html>??

?

效果非常好,呵呵。

热点排行