1. 爱易网页
  2. HTML教程
  3. CSS兑现将div固定在页面指定地方

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

日期：2014-05-17　 浏览次数：20572 次

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 ?

相关资料更多>

  1. 怎么将可拖动的多行文本框设置为不可拖动
  2. 用CSS3.0兑现独特相册
  3. 大爱jQuery，10款漂亮适用的jQuery/CSS3插件
  4. 把一个网页“另存为”后，CSS代码里的图片并没有保存，有什么办法都保存下来？该怎么处理
  5. web前端框架对比分析解决方法
  6. 如何修正网页中的FlashSWF文件
  7. html 禁止右键效能
  8. Struts HTML标签库学习札记
  9. dhtmlxtree在firefox上报错解决办法