我发现原来做前端真的是需要创意的。前几天看到别人用boeder代替边距做hover效果,这次又看到用这个办法做固定定位的,解开了我一个心结。
其实很简单,就是我一直都没想到,元素相对HTML绝对定位,然后用BODY做页面容器。
先看看效果吧呵呵。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="UTF-8">
<head>
<title>跨浏览器固定定位</title>
<style type="text/css">
*{margin:0;padding:0;}
html{_overflow:hidden;}
body{_height:100%; _overflow-y:auto;}
#box{width:100px; height:100px;background-color:black;position:fixed;_position:absolute; top:100px; left:100px;}
</style>
</head>
<body>
<div>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内1111容<br>
</div>
<div id="box"></div>
</body>
</html>
提示:你可以先修改部分代码再运行。