实现DIV的上、下、左、右、中定位，效果：

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

#Layer1 {
position:absolute;
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=480Html代码

.divStyle{ position:absolute; 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>