假設大塊內部包含着小塊，
用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>