“relative”意思是DIV的位置是相對于其他 tag 的，而“absolute”是說 DIV tag 的位置是相對于它所在的窗口left 相對于窗口左邊的位置top 相對于窗口上邊的位置width DIV tag 的寬度所有在 DIV 里的文字或html都在里面height DIV tag 的高度這個性質很少用除非你想 Clip 層次clip 給出 layer 的 clip；相對布局，不能直接決定子組件的絕對位置，需要top，bottom，left，right4個屬性來配合，確定元素的位置適配性好，使用positionrelative相對定位，來定義組件的位置屬性只能在相對布局中使用，在絕對布局中不會顯示絕對布局也叫坐標布局，直接就可以決定子組件的絕對位置，簡單直接就可以定位，但是由于。

具體代碼左浮動 floatleft右浮動 floatright三定位布局 1靜態(tài)定位 positionstatic默認值，不寫position相當于寫上positionstatic以前沒學定位的時候其實都是靜態(tài)定位，元素在它原本的位置顯示，即使加了topleft等也不起作用2相對定位 相對定位是相對于自身的原始位置進行平移，如果設；定位分為相對定位絕對定位和其它定位最常用的就是前兩種positionrelative就是相對定位，它相對于原有位置移動，但是，他移動了以后，他的以前的位置的空依然存在用法divpositionrelativetop20pxleft30px 意思就是那個盒子相對于原有的位置移動向下移動20px向右移動30pxposition。

使用relative定位時，元素將保持在它原本的位置，然后通過leftrighttopbottom屬性進行偏移例如，要讓一個id為mybox的元素向左偏移20像素向上偏移20像素，可以這樣設置CSS代碼#myboxpositionrelativeleft20pxtop20px 這樣，mybox元素就會相對于其原始位置移動，但仍然占據原來的空間；1div標簽里面的相對絕對position屬性有四個可選值，它們分別是staticabsolutefixedrelative2具體設置方法如下1DIV布局屬性之positionstatic，無定位該屬性值是所有元素定位的默認情況，在一般情況下，我們不需要特別的去聲明它，但有時候遇到繼承的情況，我們不愿意見到元素所繼承的屬性。

如果sub1設置了relative定位，例如#sub1 position relative padding 5px top 5px left 5px ，sub1的相對定位會根據top，right，bottom，left的值，將sub1按照它原本應該在的位置進行偏移這里“相對”指的是相對于其原本位置的偏移，而不是相對于其他元素當我們設置sub1為relative。

div相對父div定位

1、代碼效果不過，在容器里使用了padding的話，會改變容器的大小，所以在寫代碼之前要先計算好容器的大小及padding2margin外邊距代碼效果3絕對定位positionabsolute top50px left20px讓文字內容相對div容器絕對定位，需要對div容器設置positionrelative代碼效果。

2、父DIV設置為相對定位，子DIV設置為絕對定位ltdiv style=quotheight158px width158px positionrelativequot Test001 ltdiv style=quotheight158px width158px filter alphaopacity=45 opacity045 positionabsolute left0 top0quot Test002ltbr ltdiv ltdiv 父級的相對。

3、相對定位則通過positionrelative實現，這種情況下，元素會相對于其最近的已定位祖先元素進行定位，如quotpositionrelativemarginleft20pxquot在代碼示例中，兩個div元素中，如果第一個div設置為quotfloatleftwidth100pxheight800pxpositionfixedquot，第二個div則使用quotfloatleftpositionrelativemargin。

4、相對定位指你所定位的要素的位置相對于在文件中所分配的位置例 Ipositionrelative*位置相對*left40px*左40像素*top10px*頂部10像素*相對定位的關鍵在于定位了的要素的位置是相對于它通常應在的位置進行定位相對定位單元出現在普通的靜態(tài)定位單元的行間，定位時沒有把。

5、如下圖，可以看到兩個div在沒使用定位的情況下顯示的位置，我們可以發(fā)現div是個塊，自動換行了2相對定位首先給div2使用相對定位，用positionrelative來實現的，具體的代碼如下可以看到如下圖，div2的位置離div1的位置偏移了上邊四十個像素，左邊四十個像素3絕對定位現在來看看絕對定位。

6、div定位css樣式position有static靜態(tài)定位absolute絕對定位relative相對定位static靜態(tài)定位 默認值無特殊定位，對象遵循HTML定位規(guī)則 absolute絕對定位 將對象從文檔流中拖出，使用 left ， right ， top ， bottom 等屬性相對于其最接近的一個最有定位設置的父對象。

7、div盒子往下放，上一個兄弟元素要設置成塊元素，display block 這樣元素會自動顯示在下一行，設置高度常用以下兩種方式第一種方式，使用屬性定位絕對定位absolute 和 fixed 相對定位relative 例如positionabsolutetop25px第二種方式，設置內外邊距上內邊距是 25px，例如paddingtop25px。

div相對另一個div定位

第一種方法，定位法container positionrelativewidth800px container #leftDivpositionabsolutewidth200pxleft0top0 container #rightDivpositonabsolutewidth600pxleft200pxtop0 第二種，對#container用displayinlineblock另外就是浮動的元素不能設置padding和margin兩個。

網頁布局經常用到相對定位和絕對定位，但是有些小伙伴對于相對定位和絕對定位還不是很了解，今天小編我就來給大家深入分析分析如圖，書寫兩個div，一個div里面包含有另一個div，并且分別給它們添加一個類然后我們使用*來清除所有元素的margin和padding然后我們先來設置rone這個類，這里我就設置成紅。

用絕對定位，把兩個都放在一個大的DIV里面，大的設置成positionrelaitve第一個小DIV屬性設置成為positionabsolute zindex1第二個小DIV屬性設置成為positionabsolute zindex2widthheightleft和top視情況而定注1父級div用相對定位positionrelative，子級div用絕對定位positionab。