原文：ttp://blog.sina.com.cn/s/blog_4ade97120100bkjo.html~type=v5_one&label=rela_prevarticle
(测试通过ie6,ie7,ff2,Opera9,Safari3)
原理
在浏览器中固定位置(悬停),是不是很酷啊,可惜我们的ie6却不支持,怎么办?写hack?写js(如果我只是一个css代码工人呢)? 是不是太麻烦了呢?如果你这样想想…(为什么会悬停呢?在浏览器外面不就可以了吗?).那我们是不是把html,body元素隐藏掉了,再用div(比如<div id=body>)元素伪装成body元素,再把要悬停的元素(比如div)写在id=body元素的外层,是不是留可以了呢?^_^’
实例
我们可以先新建一个页面,命名为fixed.html,下面写开始写css
html,body{height:100%; width:100%; overflow:hidden; margin:0} div#body{ position:relative; width:100%; height:100%; overflow-x:auto; overflow-y:scroll; background:#fff; cursor:default } div#fixed{ position:absolute; z-index:10; right:100px; bottom:100px; width:400px; height:300px; background:#000; color:#fff; text-align:center; line-height:300px }
xhtml
<div id="fixed"> 讨厌,我怎么不会动了啊? </div> <!-div id=body 为body---> <div id="body"> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> </div>
标准的,实用的(实在找不到形容词了!)…
我们给写个小小的hack,使它兼容各个浏览器吧?好,请看下面
html,body{height:100%; width:100%; _overflow:hidden}
给你一个思路,你会发现什么呢? ^_^!
◇评论◇