html有关position与margin的有趣现象

今天写脚本时有这么一段

<div  id="leftcatalog">  
<div> <a class="content" href="#ct1">商家入驻</a><br>  </div>
<div> <a  style="top:20px;position:relative" class="content" href="#ct2">买家指南</a><br>   </div>
<div> <a  style="top:40px;position:relative" class="content" href="#ct3">聊天工具使用</a><br>   </div>
<div> <a  style="top:60px;position:relative" class="content" href="#ct4">联系我们</a> </div>
</div>
       
　      <div class="mainbody">
  <h2 id="ct1" class="paragraph">商家入驻</h2>
  <p id="ct2" class="paragraph">买家指南</p>
   </div>

然后惊奇的发现，当leftcatalog中的position属性为fixed时，mainbody中的margin将不再将leftcatlog作为参照，而是将浏览器作为参照。