DIV+CSS浮动层全方位定位
实现DIV的上、下、左、右、中定位,效果:
代码:
<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>