分享一个跨浏览器固定定位的方法。

我发现原来做前端真的是需要创意的。前几天看到别人用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> 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内1111容 </div> <div id="box"></div> </body> </html>

提示：您可以先修改部分代码再运行

六月 13th, 2009 in 表现