关于 position:fixed;属性
与浏览器窗口相比,生成绝对定位元素。
通过元素的位置 “left”, “top”, “right” 以及 “bottom” 规定属性。
position:fixed; 即使拉动滚动条的位置,也可以将网页上的某个元素固定在绝对位置。(在 LOO2K 博客右下角的顶部按钮使用了这个 CSS 实现属性的)
一般的 position:fixed;实现方法
以我的博客为例,在右下角<div id="top">...</div>
这个 HTML 元素使用的 CSS 代码如下:
#top{position:fixed;bottom:0;right:20px;}
实现让<div id="top">...</div>
元素固定在浏览器底部和右侧的20个像素。
在 IE6 中实现 position:fixed;的办法
刚刚提过,在 IE6 不能直接使用 position:fixed; 。你需要一些 CSS Hack 解决它。(当然,IE6 不仅仅是问题 position:fixed;)
同样的还是让 <div id="top">...</div>
元素固定在浏览器底部和右侧的20个像素上,这个代码是:
#top{position:fixed;_position:absolute;bottom:0;right:20px;_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop document.
documentElement.clientHeight-this.offsetHeight-(parseInt(this.
currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,
10)||0));}
right 跟 left 属性可以通过绝对定位来解决, top 跟 bottom 需要使用上述表达式来实现。其中在_position:absolute;
中的_
符号只有 IE6 才能识别,目的是区分其他浏览器。
以上只是一个例子,以下是最重要的代码片段:
将元素固定在浏览器顶部
#top{_position:absolute;_bottom:auto;_top:expression
(eval(document.documentElement.scrollTop));}
将元素固定在浏览器底部
#top{_position:absolute;_bottom:auto;_top:expression(eval
(document.documentElement.scrollTop document.documentElement.
clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-
(parseInt(this.currentStyle.marginBottom,10)||0));}
这两个代码只能在底部和顶部实现,你可以使用 _margin-top:10px;
或者 _margin-bottom:10px;
修改数值控制元素的位置。
position:fixed;闪动问题
现在,问题还没有完全解决。使用上述方法后,您会发现:固定定位元素在滚动滚动条时会闪烁。解决闪光问题的办法是 CSS 添加到文件中:
*html{background-image:url(about:blank);background-attachment:fixed;}
其中 *
是给 IE6 识别的。
到此,IE6 的 position:fixed; 问题已经解决了。