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