CSS实现浮动层效果更好!(IE6以上)

众所周知,很多网站做个浮动广告条,都需要做个浮动层,用DW会帮你做好,生成这样的样式:

#Layer1 {

position:absolute;

width:200px;

height:115px;

z-index:1;

}

之后再调浮动层跟踪滚动条的JS特效(本人用的简单方法:onscroll实现随滚动条浮动的层)

可是用这个JS特效之后,感觉效果还是不理想,拉动滚动条大幅度移动时, 浮动层跟滚动条跑来跑去.

可是谁会想过不调用JS特效就能实现浮动层能平滑地跟着滚动条移动呢, 其实啊, 精通CSS的美工不用JS都能做比程序好!

嘿嘿,关键就在CSS样式的position属性的设置了!

我们先来看Position在CSS中的语法定义:

position : static | absolute | fixed | relative

参数：

static : 　无特殊定位，对象遵循HTML定位规则

absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框

relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

fixed : 　对象可以层叠,能对象固定页面上的某个位置, 也不会受滚动条移动的影响(可惜的是IE5.5及NS6尚不支持此属性)

大家看完这些定义,知道该用position的哪个参数了吧? , 嘿,对了,就是用position:fixed. 虽然说是在IE5.5及NS6尚不支持,但是我想现在电脑系统更新飞快的年代里, 再过几年, 人们使用的浏览器大部分都会是IE5.5及NS6以上吧.

注:CSS手册写得不对,应该是IE6以上才支持

http://www.techmango.com/blog/article.asp?id=480