子元素是absolute, 其左margin是父容器padding开始的,为什么右margin是从body开始?

Question

在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;}

本来想做三栏式布局，后来发现高度不能自适应，就放弃了这种方法．但过程中发现了这个不能理解的现象．我猜想可能是父容器没定width的原因，但发现定了后还是不行，这是怎么回事呢？

Answer 1

article不是relative的，里面三个absolute都是相对于body的。

middle的四个方位也没有定义，盒模型应该是和left挨着的，而且没有块状上下文，margin就盖在了left上。右边由于相对于body绝对，margin从body起也是正常的

三列布局可以尝试一下flex布局，或者给middle一个left

Answer 2

给父元素一个相对定位试试

Answer 3

原因很简单就是你middle的定位是position，但没有设置left，top，right的值，而默认值为auto，这一点你点开chrome隐藏的所有属性就能看到。至于auto是多少，最终结果chrome盒模型margin外层就有显示，至于计算过程自己翻下文档吧，这里不提供了