求大神解释： 我要用CSS布局，请问绝对定位的坐标改怎么计算。可以举个例子说明下吗？？
唉，乱七八糟。忍不了了！
我先给你按照我的理解说下，然后给你网站去理解吧，我也是从哪里理解的！
文档流的几种：
1.正常文档流。
2.浮动文档流。
3.定位的文档流。
其中你问的是定位。
定位又分为2中：
相对很绝对。
相对定位的文档流，保持占位，仍占据原来正常文档流的位置。在此基础上进行的
left:100px; top:100px; //一个表示从原来的占位点，向右、下各平移100PX。
绝对定位会脱离文档流，也就是出现了层叠覆盖的情况。
left:100px; top:100px; 它究竟跑哪里了呢？
这个坐标是以最近定位父元素为参考点的。
知道了这点你就可以计算了。
一般你需要先设置一个相对定位元素，然后在其里面定位绝对定位，这是最常见的！
几个例子：
<div style="width:100px; height:100px; background-color:#c00;">
<p style="width:50px; height:50px;">
<span style="position:absolute;left:0; top:0; display:inline-block; width:10px; height:10px;">我绝对定位了</span>
</p>
</div>
这个运行后
没有遇到已定位的父元素，于是BODY作为参照。
<div style="width:100px; height:100px; background-color:#c00;">
<p style="width:50px; height:50px; background-color:yellow; position:relative">
<span style="position:absolute;left:0; bottom:0; display:inline-block; width:10px; height:10px; background-color:blue;"></span>
</p>
</div>
这个例子你自己运行吧。
还有：
<div style="width:100px; height:100px; background-color:#c00;position:relative">
<p style="width:50px; height:50px; background-color:yellow; ">
<span style="position:absolute;left:0; bottom:0; display:inline-block; width:10px; height:10px; background-color:blue;"></span>
</p>
</div>
div的布局就像表格那样嵌套，只是打个比方,当然和表格不一样了,不过你用DIV+CSS做一个网页基本上不用绝对或相对定位)很少用,只有特殊需要才用定位.
如果要问绝对定位好还是用相对定位好？
因为绝对定位（和文档流没关系）如无申明，则其是对与body而言的，处理不好的话。如显示器尺寸变了，可能就会变型。
相对定位的元素属文档流，所以稳定的，相对定位是相对他该出现的位置，如无设top left之类，和普通div基本一样。
一般的绝对定位是这样用的，父元素要是相对定位的且须有布局，如有个高度，这样子元素用绝对定位，就可以相对它的父元素进行绝对定位，父元素若不这样做，那么子元素用绝对定位其实是相对body定位
以上参考网上资料：
举个实例 css嵌入其中
<html>
<style>
#color1,#color2,#color3{border:5px #FFFFFF solid;width:30px; height:30px}
#color1{ background:#FF9900;}
#color2{ background:#00CCFF;}
#color3{ background:#000000;}
</style>
<script>
function colors(i)
{
if(i==1)
bodys.style.background="#FF9900";
else if(i==2)
bodys.style.background="#00CCFF";
else
bodys.style.background="#000";
}
</script>
<body id="bodys">
<input type="button" id="color1" onclick="colors(1)">
<input type="button" id="color2" onclick="colors(2)">
<input type="button" id="color3" onclick="colors(3)">
</body>
</html>
