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

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

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

回答

編輯回答

澐染

article不是relative的，里面三個(gè)absolute都是相對(duì)于body的。

middle的四個(gè)方位也沒(méi)有定義，盒模型應(yīng)該是和left挨著的，而且沒(méi)有塊狀上下文，margin就蓋在了left上。右邊由于相對(duì)于body絕對(duì)，margin從body起也是正常的

三列布局可以嘗試一下flex布局，或者給middle一個(gè)left

2017年3月26日 14:12

編輯回答

選擇

原因很簡(jiǎn)單就是你middle的定位是position，但沒(méi)有設(shè)置left，top，right的值，而默認(rèn)值為auto，這一點(diǎn)你點(diǎn)開(kāi)chrome隱藏的所有屬性就能看到。至于auto是多少，最終結(jié)果chrome盒模型margin外層就有顯示，至于計(jì)算過(guò)程自己翻下文檔吧，這里不提供了

2017年10月12日 12:14

編輯回答