实现DIV的上、下、左、右、中定位，效果：
众所周知,很多网站做个浮动广告条,都需要做个浮动层,用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
Html代码
<html> <head></head>
<style type="text/css">
.divStyle{ position:absolute; width:100px; height:100px; background:red; color:#fff; line-height:100px; text-align:center; }
#topLeft{left:0;top:0;}
#topMiddle{left:50%;top:0;margin-left:-50px;}
#topRight{right:0;top:0;}
#middleLeft{left:0;top:50%;margin-top:-50px;}
#middleMiddle{left:50%;top:50%;margin-top:-50px;margin-left:-50px;}
#middleRight{right:0;top:50%;margin-top:-50px;}
#bottomLeft{bottom:0;left:0;}
#bottomMiddle{bottom:0;left:50%;margin-left:-50px;}
#bottomRight{bottom:0;right:0;} </style>
<body>
<div id="topLeft" class="divStyle">topLeft</div>
<div id="topMiddle" class="divStyle">topMiddle</div>
<div id="topRight" class="divStyle">topRight</div>
<div id="middleLeft" class="divStyle">middleLeft</div>
<div id="middleMiddle" class="divStyle">middleMiddle</div>
<div id="middleRight" class="divStyle">middleRight</div>
<div id="bottomLeft" class="divStyle">bottomLeft</div>
<div id="bottomMiddle" class="divStyle">bottomMiddle</div>
<div id="bottomRight" class="divStyle">bottomRight</div>
</body> </html>