DIV的相对布局和绝对布局

 position:relative|相对定位 

使用position:relative，就需要top,bottom,left,right4个属性来配合，确定元素的位置。 

如果要让div-1层向下移动20px,左移40px: 

example代码:

#div-1 {

position:relative;

top:20px;

left:40px;

}

如果用到相对定位，紧随他的层divafter是不会出现在div-1的下方，而是和div-1在同一个高度出现。 

可见， position:relative;并不是很好用。 

position:absolute|绝对定位 

使用position:absolute;,能够很准确的将元素移动到你想要的位置， 

让我将 div-1a 移动到页面的右上角: 

example代码:

#div-1a {

position:absolute;

top:0;

right:0;

width:200px;

}

使用绝对定位的div-1a层前面的或者后面的层会认为这个层并不存在，丝毫不影响到他们。所以position:absolute;用于将一个元素放到固定的位置很好用，但是如果需要div-1a层相对于附近的层来确定位置就不要实现了。 

*这里有个Win IE的bug需要提到，就是如果为绝对定位的元素定义一个相对的宽度，那么在IE下它的宽度取决于父元素的宽度而不是整个页面的宽度。 

position:relative + position:absolute|绝对定位+相对定位 

如果给父元素(div-1)定义为position:relative;子元素(div-1a)定义为position:absolute，那么子元素(div-1a)的位置将相对于父元素(div-1)，而不是整个页面。 

让div-1a定位于div-1的右上角： 

代码实例：

<div id="div-1">

    <div id="div-1a">

    this is div-1a element.

    </div>

this is div-1 element.

</div>

#div-1 {

position:relative;

}

#div-1a {

position:absolute;

top:0;

right:0;

width:200px;

}

让我们实践position:relative + position:absolute的理论，实现两列布局。 

实例代码：<div id="div-1">

    <div id="div-1a">this is the column-one</div>

    <div id="div-1b">this is the column-two</div>

</div>

div-1 {

position:relative;/*父元素相对定位*/

}

#div-1a {

position:absolute;/*子元素绝对定位*/

top:0;

right:0;

width:200px;

}

#div-1b {

position:absolute;/*子元素绝对定位*/

top:0;

left:0;

width:200px;

}

注意，在这个例子中会发现父元素的告诉不会随着子元素的告诉变化，所以如果父元素的背景和边框需要定义一个足够高的高度才能显示出来。

 

 

 

DIV布局用绝对定位好还是用相对定位好?

这个div+css布局很少用定位，除非做些特效或有必要才定位。

div的布局就像表格那样嵌套，

如果要问绝对定位好还是用相对定位好？

因为绝对定位（和文档流没关系）如无申明，则其是对与body而言的，处理不好的话。如显示器尺寸变了，可能就会变型。

相对定位的元素属文档流，所以稳定的，相对定位是相对他该出现的位置，如无设top left之类，和普通基本一样。

一般的绝对定位是这样用的，父元素要是相对定位的且须有布局，如有个高度，这样子元素用绝对定位，就可以相对它的父元素进行绝对定位，父元素若不这样做，那么子元素用绝对定位其实是相对body定位。