关于绝对定位不设置TRBL默认定位问题

最近遇到一个元素设置绝对定位且不设置TRBL的问题，查了很多资料解答不了~~~~拜托各位大神解决一下~~~~
代码很简单，首先：

 <style type="text/css">
    *{ padding:0px; margin:0px;}
    #a{ border:4px solid #f00; width:50px; height:50px; position:absolute;}
    #b{ border:2px solid #00f; width:50px; height:50px;margin-top:100px;}
    #c{ border:4px solid #0f0; width:50px; height:50px; }
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>

浏览器显示如下：图片说明
可以很清楚地看到，方框b设置了margin-top，方框a就被拖了下来，方框a为什么会被拖下来呢？我觉得方框b的位置变动应该不会对方框a造成什么影响啊？
之后为了印证我的猜想，我又改了一下代码试了一下。改动不大，就是方框a取消绝对定位，方框b绝对定位，方框c设置margin-top，结果正如我所料的一样：图片说明
方框c的位置变动并未对方框b造成什么影响！
那我想问的是，为什么a设置绝对定位，b设置margin-top，方框a就会被拖下来啊？？

事实上你拖动的是整个body而不是div#a

首先说一下margin，正常的文档流里，margin是距离周围元素多少距离，而不是距离父级边界多少距离

举个例子

<div> 1 </div>
<div>
    <div style="height:100px; margin:100px;"> 2 </div>
</div>
<div> 3 </div>

如果我现在问你，div1和div3相距多少？

当然你会告诉我，这还不简单，div2的height100px，上下margin100px，一共300啊。

好的那我再问你，div2的父级高度是多少？

这个时候就不是300px了，正常的文档流里margin不会把父级撑开！

所以div2的父级还是100px，虽然div2并没有100px的上下margin，但是它也是从div2所在位置开始的，也就是说整个父级被div2拖下来了

图片说明

好的现在回来回答你的问题，首先第一个情况，说了嘛，margin不会把父级也就是body撑开，所以body和div#b都往下移了100px，你问我div#a呢？他被加了绝对定位已经脱离文档流了，所以对div#b没有影响。

然后第二个情况，呃......好像没什么好解释的了。