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

<html>??<head>??
????<title></title>??????<style?type="text/css">???
???????html,body?{??????????????overflow:hidden;??
????????????margin:0px;??????????????width:100%;??
????????????height:100%;??????????}??
??????????.virtual_body?{??
????????????width:100%;??????????????height:100%;??
????????????overflow-y:scroll;??????????????overflow-x:auto;??
????????}????
????????.fixed_div?{??????????????position:absolute;??
????????????z-index:2008;??????????????bottom:20px;??
????????????left:40px;??????????????width:800px;??
????????????height:40px;??????????????border:1px?solid?red;??
????????????background:#e5e5e5;??????????}??
????</style>??</head>??
??<body>??
<div?class="fixed_div">I?am?still?here!</div>??<div?class="virtual_body">??
????<div?style="height:1800px;">??????????I?am?content?!??
????</div>??</div>??
</body>??</html>??

效果非常好，呵呵。

热点排行