div定位在浏览器窗口的固定位置的方法

最新推荐文章于 2021-06-04 13:49:09 发布

原创最新推荐文章于 2021-06-04 13:49:09 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #HTML

CSS 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使广告栏在新旧浏览器中都能实现固定显示的方法。通过使用CSS的position属性，并针对不支持fixed属性的老版浏览器提供了一个兼容方案。

在很多网站上面我们可以看到浏览器的两边都有广告，这些广告无论我们怎么滚动浏览器的滚动条它都出现在浏览器窗口的固定位置，也就是跟着滚动条一起滚动。对于这种效果只需要在div的样式中设置position为fixed即可。但是这个fixed只对当前比较新的浏览器才支持，对于一些老版本的浏览器这种方法是行不通的。因为老版本浏览器压根不认识fixed，比如说IE6，IE6在国内可是还占着相当大的比重，不能忽视。所以可以用以下的方法解决：

.focus {
	Z-INDEX: 300;  POSITION: fixed; WIDTH: 255px; BOTTOM: 0px; PADDING-RIGHT: 8px;  FLOAT: right; OVERFLOW: hidden;  RIGHT: 0px; 
}
* HTML .focus {
	POSITION: absolute; ; TOP: expression(offsetParent.scrollTop+document.documentElement.clientHeight-this.offsetHeight)
}

在第一个样式中，bottom和right都设为0，表示把div固定在浏览器的右下方。重要在第二个样式，这样就可以兼容所有的浏览器了。

http://www.buyonstore.com