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

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

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

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. 20个学习CSS的最佳网站-让你从入门到精通
  2. HTML5 多媒体播放【一】
  3. DreamWeaver预览显示空白解决方法
  4. 近日学习css等的一些实践总结
  5. 容易Html
  6. 请教怎么不让table默认换行
  7. 新手，请问一个有关问题，多谢
  8. 20个学习CSS的最佳网站——让你从入门到精通
  9. django[模板标签]django模板变量直接显示html代码的有关问题