假设大块内部包含着小块，
用margin！
先看大块div的情况，
要想实现div一个接着一个，那就什么都不用设置，就是默认的但不需要显示的默认设置position：static；如果要让大块div之间有间隔或者相对偏移一定尺寸，需要用margin！而不是positionrelative，下面就讲position：relative的特点：
relative的特点：
relative的作用，就是在其默认显示的位置的基础上，偏移一定的尺寸，可以是上下左右四个参数来设置。但是这个偏移是悄悄的，只有它自己知道，仅仅是显示出来的效果偏移了，但它实际还占用着原来的位置，就像放风筝，风筝随着风向的改变而偏移relative了一定距离，而实际人还是站在原来的位置，且所占用的平面面积不变。其后的其它div假设是div2会以地面位置参照接着之前的div1继续显示，但是如果div1是向下偏移了，那么就会导致div2会覆盖掉一部分的div1，如果希望此时div2能接着div1显示，那么div2也要与div1相等的量向下偏移，……假设后面还有div3呢，div3依然认为div1、div2还在原来的位置，所以div3接着原来的位置继续显示，可惜因为div1和div2都向下偏移了，所以div3就与div2重叠了2倍的div1的偏移距离，要想使div3能够接着div2显示，则div3应该也用relative，且向下偏移量是div1和div2的加和……之后同理。
如果div的position设置了relative属性，但是没有指定偏移量，则相当于默认的position：static。
position：absolute的特点：
当一个大div0里面有多个小div1-5共5个，从上到下依次显示着。
此时加入希望其中第三个即div3能不考虑其它四个div（1、2、4、5）的位置，自己能独立的在大div0里面的任意位置显示（以大div0的左上角为参考点），也不需要像relative那样复杂的计算（relative多个时须叠加计算麻烦），那么就需要用到绝对定位。
但是添加了绝对定位以后，假如发现div3跑到了以浏览器显示区域左上角为参考原点，以所指定的偏移量为偏移量的位置，则我们需要在大div0那里加上position：relative（但不指定具体偏移量），这样设置后div3的偏移就是以大div0的左上角作为偏移原点。
同时用absolute偏移了的div3不再占用了原来的位置，原来的位置由div4去接着显示。
float
如果希望div能够在水平方向连续显示，则应该把div加上float，可以左对齐，也可以右对齐，
假设总共三个div，
第三个不希望与前两个一样显示在同一行，而是希望自己单独起一行，则div3应设置clear：both。
div尺寸的特殊设置
div的尺寸可以设置成其祖先元素的百分比的形式，还可以设置minheight的最小高度这样的形式。
【【【【【【【【【【【【【【【
直接复制下面html代码去测试，你会有收获的……
<HTML> <head><title>ceshi </title> <script type="text/javascript"> function findPosX(intId) { var obj = document.getElementById('div' + intId ); var curleft = 0; if (obj.offsetParent) //ymq2013：貌似是假如div有父亲，即自身被嵌套 { while (obj.offsetParent) { curleft += obj.offsetLeft;//ymq2013：取得相对于所嵌套的上级的左边距 obj = obj.offsetParent;//ymq2013：然后取得其父亲对象，稍后会用到 } } else if (obj.x) //else if与上面的if不是选择分支关系，而是顺序执行关系 curleft += obj.x;//取得其父亲的x坐标，并累加到curleft变量中 alert(curleft); //return curleft; } </script> <!-- 要能明白这些嵌套关系，下面有三层嵌套和两层嵌套，以及所对应产生的值是怎么来的，函数如何判断它的坐标位置，这是标准规定的，记住即可。--> </head> <!-- div不设置高度，则可以由内部的元素的高度来自动把它撑大。如果设置了，但内部比外面打，则不同浏览器解释不一样。--> <body id="documentBody" style="border: thin solid #000000; margin-top:0; margin:10px; background-color:lightgrey"> <div>
<DIV id="div1" style="margin-top:100px;margin-left:100px; height:290px; width:100px; background-color:#FF0000; "> <SPAN id="span1">Placeholder text 1.</SPAN> <div id="div1_1" style=" width:50px; height:150px; background-color:#FFFF00 ">1_1<br />高度在50与250切换看效果</div> <div id="div1_2" style="position:relative;top:10px; width:50px; height:50px; background-color:#999999 ">1_2</div> <div id="div1_3" style="position:relative;top:20px; width:50px; height:50px; background-color:#990099 ">1_3</div> </DIV> <DIV id="div2" style="position:relative; height:300px; width:100px; background-color:#00FF00;"> <SPAN id="span2">body级别次级的大div- 2.</SPAN> <div id="div2_1" style=" width:50px; height:150px; background-color:#FFFF00 ">2_1
<div id="div2_1_1" style="position:absolute;top:50px;left:50px; width:50px; height:50px; background-color:#999999 ">2_1_1</div> </div> <div id="div2_2" style="position:absolute;top:10px;left:10px; width:50px; height:50px; background-color:#999999 ">2_2</div> <div id="div2_3" style="position:relative;top:20px; width:50px; height:50px; background-color:#999999 ">2_3</div>
</DIV>
<DIV id="div3" style="margin-top:100px;margin-left:100px; height:350px; width:200px; background-color:#0000FF;"> <SPAN id="span6">Placeholder text 3.</SPAN> <DIV id="div4" style="margin-top:0px;margin-left:100px; height:200px; width:200px; background-color:#00FFFF;"> <SPAN id="span3">Placeholder text 4.</SPAN> <div id="div4_1" style="float:left; height:50px; width:50px; background-color:#CC3399; ">4_1</div> <div id="div4_2" style="float:left; height:50px; width:50px; background-color:#FFFF00; ">4_2</div> <div id="div4_3" style="float:right;height:50px; width:50px; background-color:#FF00FF; ">4_3</div> <div id="div4_4" style="clear:both; height:50px; width:50%; background-color:#FF00FF; ">4_4</div> </DIV> </DIV>
<DIV id="div5" style="min-height:120px; width:100px; background-color:#00FF00;"> <SPAN id="span4">Placeholder text 5.</SPAN> <div id="div5_1" style="margin-left:20px; height:250px; width:150px; background-color:#FF00FF; ">5_1</div> </DIV>
<DIV id="div6" style="height:100px; width:100px; background-color:#0000FF;"> <SPAN id="span5">Placeholder text 6.</SPAN> </DIV>
<div id="note" style="position:relative; top:100px; left:100px; border-color:#000000; border-bottom-width:1px; width:800px; height:300px; background-color:#669933"> <p…… </p></div>
<div style="position:absolute; top:0px; left:400px;"> <input type="button" value="单击1" onClick="findPosX(1)"> <input type="button" value="单击2" onClick="findPosX(2)"> <input type="button" value="单击3" onClick="findPosX(3)"> <input type="button" value="单击4" onClick="findPosX(4)"> <input type="button" value="单击5" onClick="findPosX(5)">
</div>
</div>
</body> </HTML>