唉，乱七八糟。忍不了了！
我先给你按照我的理解说下，然后给你网站去理解吧，我也是从哪里理解的！
文档流的几种：
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:absoluteleft: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:absoluteleft:0 bottom:0 display:inline-block width:10px height:10px background-color:blue"></span>
</p>
</div>
这个例子你自己运行吧。
还有：
<div style="width:100px height:100px background-color:#c00position:relative">
<p style="width:50px height:50px background-color:yellow ">
<span style="position:absoluteleft:0 bottom:0 display:inline-block width:10px height:10px background-color:blue"></span>
</p>
</div>
楼上的也太复杂了，什么都贴出来了？——
页面
代码
<div
class="content">
<div
class="left"></div>
<div
class="mid"></div>
<div
class="right"></div>
</div>
css文件
.content{
width:800px
magin:0
auto
}
.left{
float:left}
.mid{
float:left}
.right{
float:left}
