css样式布局中position的那些事儿
哎，页面布局及设计开发。对于一个一直从事后台开发来说屌丝来说，确实是件非常费时、费力，非常艰难的一件事。
今晚是想实现把多张重叠在一起。或是标记一张图片中不同的位置然后赋以超链接。花了一晚上的时间，才算初步搞定，大致明确了下面几个css属性使用方法。
【1】将标签设置为float。和同事讨论：
html的标签有块级和行级（至于那些是块级，可百度之），每一个块级会占用html文档的一行（之所以是一行，是由于块级后面会带有换行）。假设把块级标签设置为float时。则标签：（1）脱离原来父级标签。
（2）能够在一行进行显示。
【2】position设置为fixed。
fixed是相对于整个浏览器。有兴趣的同学能够试验下，把一个有大小的标签设置为fixed，缩放浏览器，使浏览器产生滚动栏（上下或左右）。当拉动滚动栏时。被设置成fixed的标签是不会改变其位置的。
【3】position设置为absolute。
absolute是相对于近期的父亲标签。依旧是上面的那个试验。当拉动滚动栏时，被设置成absolute的标签也会跟着html文档位置的改变而变动。
【4】position设置为relative。
relative是相对于原来该标签的位置。
以下结合今晚我做是试验图，来看下效果：
（1）a线是absolute
（2）b线是fixed。
上面图我基本的目的是，把圆盘中make1~8的位置给标记出来。然后给以超链接，详细的代码为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!--<link type="text/css" rel="stylesheet" media="all" href="webCss.css">-->
<title>mydw</title>
<style>
body {
background:#CCCCCC;
}
a.makeR1{ left:150px; top:45px; width:70px; height:80px;}
a.makeR2{ right:150px; top:45px;width:70px; height:80px;}
a.makeR3{ left:65px; top:135px; width:70px; height:80px;}
a.makeR4{ right:65px; top:135px;width:70px; height:80px;}
a.makeR5{ left:65px; top:265px; width:70px; height:80px;}
a.makeR6{ right:65px; top:265px;width:70px; height:80px;}
a.makeR7{ right:215px; top:365px;width:70px; height:60px;}
a.makeR8{ right:180px; top:160px;width:137px; height:137px;}
.makeR9{ right:180px; top:160px;width:137px; height:137px;}
.roundMakeBox{
position:fixed;
z-index:99992;
text-align:center;
left:50%;
margin-left:-250px;
width:499px;
height:501px;
border:1px solid blue;
}
.roundLink{ position:relative; bottom:0px;z-index:99993;border:1px solid green;}
.roundLink a{ display:block;position:absolute;z-index:99994;border:1px solid red;background:#FFFF00;}
#img1{ display:block;position:absolute;z-index:99994;border:1px solid red;}
</style>
</head>
<body>
<div class="roundMakeBox">
<div class="roundLink">
<img src="makeRound.png">
<a href="#" class="makeR1">makeR1</a>
<a href="#" class="makeR2">makeR2</a>
<a href="#" class="makeR3">makeR3</a>
<a href="#" class="makeR4">makeR4</a>
<a href="#" class="makeR5">makeR5</a>
<a href="#" class="makeR6">makeR6</a>
<a href="#" class="makeR7">makeR7</a>
<a href="#" class="makeR8">makeR8</a>
<img id="img1" class="makeR9" src="LOGObg.png" />
</div>
</div>
</div>
</body>
</html>
【1】关于roundMakeBox居中的问题：
left:50%; margin-left:-250px;left:50%是标签的左边缘移动到父标签的50%处（一半），那为什么又要margin-left -250px呢？
由于当我left50%时，标签的左边缘尽管到了50%处。但整个的标签确实向右偏移了。我们所谓的标签居中，是想标签中心位置在父标签的中心位置处。left50%显然是多移动了标签一般的位置，原来标签是500px，因此就margin-left-250px了。
【2】关于makeR中每一个a的像素位置。是怎么得到的？
弄清楚position的absolute后。剩下的就是測量位置了（用什么測？我是用尺，不知道是否还有其它更好的方式）。
好了。以上是我的理解，不知是否有表达清楚。或是我理解的有偏差，看官须要自己去实验測试。
