relative与absolute

父元素使用相对定位时，子元素如果使用绝对定位，则top,right,left,bottom属性相对父元素生效。否则子元素将会逐层向外查找到position不为static的层级元素，直到body为止，再使top,right,left,bottom属性生效。

 

<div style="position:relative;width:200px;text-align:center;border:1px solid #000000">
    父元素使用相对定位
   <div style="position:absolute;top:0px;right:10px;background:gray;width:20px;">
   </div>
</div>
<br/>
<br/>
<div style="width:200px;text-align:center;border:1px solid #000000">
    父元素不使用相对定位
   <div style="position:absolute;top:0px;right:10px;background:gray;width:20px;">
   </div>
</div>