position:relative与absolute

1.绝对定位：脱离了文档流与浮动模型，独立于其他对象而存在，没有占位，

2.相对定位：没有脱离正常的文档流，被设置元素相对于其原始位置而进行定位，其原始占位信息仍存在。

 

1。若c嵌套在b中，且b,c均是相对定位，则c的相对定位是相对于b而言的，b保留占位信息，且b中保留c的占位信息。

2。若c嵌套在b中，b进行绝对定位，c进行相对定位，则b脱离浮动，没有占位信息，而c相对b定位，并在b中发生占位。

3。若a,b,c,d并列，且都嵌套在id为group的div中，且：

    #group{potision:relative;height:200px;width:4oopx;}         #b{potision:absolute;left:20px;top:20px;}

     在这种方式下，父级元素是相对定位，但没有设定left,top的值，可以将其看做是浮动对象，而b是绝对定位，因而不占位，但由于父级元素是相对定位，所以这里的绝对定位变成了相对于父级元素的绝对定位，而不是相对于浏览器的。

例如：

<div id="main">
 <div id="a">aaaaaaaaaa</div>
 <div id="b">bbbbbbbb</div>
  </div>
（1）若给a设置position：absolute，会使a脱离正常的文档流，a会不占位，即b不再基于a，而是直接从parent开始定位。（b位置和没有a一样）。

若给a设置position:relative，（没有脱离文档流）则a会占位，a相对于他的原始位置进行定位，看上去是浮在main上的，而b会按原来的方式进行排列，不受a的影响。（b的位置和a没有position属性时一样）
（2）若给main设置position：relative/absolute；则里面的a或b的绝对定位或相对定位都是相对于父级元素main的，之后后再按照相对或绝对的方法进行定位。

注意：若父级元素没有设定有效的宽高值，则b是相对于group中最后一个元素的右上角进行绝对定位。