解决 IE6 position:fixed 固定定位问题！

最新推荐文章于 2022-07-24 18:34:45 发布

转载最新推荐文章于 2022-07-24 18:34:45 发布 · 54 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jonhson/archive/2011/10/18/2216473.html

本文介绍了一种使用CSS实现元素在浏览器窗口中固定位置的方法。通过使用`position: fixed;`结合特定的`top`, `right`, `bottom`, 和`left`属性值，可以使元素始终保持在屏幕的指定位置。此外，还提供了一个兼容IE6的解决方案。

元素固定在浏览器的底部和距离右边的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)));
}

转载于:https://www.cnblogs.com/jonhson/archive/2011/10/18/2216473.html