层在页面中的定位
层（div）的定位在Web开发中，有着很重要的位置。主要用到的Css属性有：
position:absolute; width:100px; height:100px; background:CornflowerBlue; left:100%; top:50%; margin-left:-100px; margin-top:-50px;
下面是不同位置的参考实现方式：分为东、南、西、北、中、东南、东北、西南、西北。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>positioning</title>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
.center
{
position:absolute;
width:100px;
height:100px;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
background:DeepSkyBlue;
}
.east
{
position:absolute;
width:100px;
height:100px;
background:CornflowerBlue;
left:100%;
top:50%;
margin-left:-100px;
margin-top:-50px;
}
.west
{
position:absolute;
width:100px;
height:100px;
background:Olive;
left:0;
top:50%;
margin-left:0;
margin-top:-50px;
}
.north
{
position:absolute;
width:100px;
height:100px;
background:MediumPurple;
left:50%;
top:0;
margin-left:-50px;
margin-top:0;
}
.south
{
position:absolute;
width:100px;
height:100px;
background:LightCoral;
left:50%;
top:100%;
margin-left:-50px;
margin-top:-100px;
}
.westNorth
{
position:absolute;
width:100px;
height:100px;
background:Violet;
}
.westSouth
{
position:absolute;
width:100px;
height:100px;
background:CadetBlue;
top:100%;
margin-top:-100px;
}
.eastNorth
{
position:absolute;
width:100px;
height:100px;
background:Tomato;
left:100%;
margin-left:-100px;
}
.eastSouth
{
position:absolute;
width:100px;
height:100px;
background:orange;
left:100%;
top:100%;
margin-top:-100px;
margin-left:-100px;
}
</style>
</head>
<body>
<div class="center">center</div>
<div class="east">east</div>
<div class="west">west</div>
<div class="north">north</div>
<div class="south">south</div>
<div class="westNorth">westNorth</div>
<div class="westSouth">westSouth</div>
<div class="eastNorth">eastNorth</div>
<div class="eastSouth">eastSouth</div>
</body>
</html>
效果如下：
