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

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

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

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

div相對父div定位

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

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

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

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

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

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

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

div相對另一個div定位

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

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

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