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中最后一个元素的右上角进行绝对定位。