子元素是absolute, 其左margin是父容器padding開始的,為什么右margin是從body開始?

在chrome上看到的margin范圍

html代碼：

<div class = "article">
    <div class = "left">sldkfjlsj</div>
    <div class = "middle">lksdflmsddssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssslksmflmsgmfmg;df;g,df;gl,f;,gd;fl,g;fl,g;ldf,;gldf;mgkdfgdfmgpfmgpsomgpsmgpspgmspmgosmgmspgomsgmspgmspgomspgmpsogflmsldfmsldmflsfm</div>
    <div class="right"><img src="glm.jpg"></div>
</div>

css代碼：

body {margin: 0px; padding:20px;}
.article { background-color: #eee; padding:20px; border:2px solid #999; overflow: hidden;}
.left {position: absolute; top:40px; left:40px; width:160px; padding:20px; border: 2px solid #999; background-color: #fff;}
.right {position: absolute; top: 40px; right: 40px; padding: 20px; width: 80px; background-color: #fff; border: 2px solid #999;}
.middle {position: absolute; margin-left: 220px; margin-right: 180px; background-color: #fff; border: 2px solid #999; padding:20px; word-break: break-all;}
img {width:80px;}

本來想做三欄式布局，后來發(fā)現(xiàn)高度不能自適應(yīng)，就放棄了這種方法．但過程中發(fā)現(xiàn)了這個不能理解的現(xiàn)象．我猜想可能是父容器沒定width的原因，但發(fā)現(xiàn)定了后還是不行，這是怎么回事呢？