爲什麼大的負邊距會使絕對元素無法包裝？

位置值將改變寬度。

的的jsfiddle：http://jsfiddle.net/caicai/mbtb5m7p/2/

爲什麼同時在div .a1的文本不會換行DIV .a2等於其母公司的寬度的寬度，？

的的jsfiddle：http://jsfiddle.net/caicai/mbtb5m7p/

.r { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 22px; 
 
    background: blue; 
 
} 
 
.a1 { 
 
    position: absolute; 
 
    top: 30px; 
 
    margin-right: -9999px; 
 
    background: green; 
 
} 
 
.a2 { 
 
    position: absolute; 
 
    top: 60px; 
 
    background: orange; 
 
}

<div class="r"> 
 
    <div class="a1"> 
 
     Why does this line no wrap. 
 
    </div> 
 
    <div class="a2"> 
 
     Why does this line wrap. 
 
    </div> 
 
</div>

來源

2015-05-19 Zhiyong Cai

你有一個的jsfiddle向世界展示 – Andrew

刪除保證金右鍵屬性 –

與開發工具的邊距值只是玩，較大的負利潤，它就越增加的寬度'a1' div，失去包裝效果。 –

的div.r具有100像素的寬度和相對放置。

兒童.a1和.a2被絕對放置。關於他們（相對放置）的父母。

如果沒有負邊距，則孩子的最大寬度等於其父母的尺寸。

但是，通過添加負邊距，您可以讓孩子「漂浮」其父母的邊界。

來源

2015-05-19 13:27:02 LinkinTED

謝謝！你能解釋一下'.a1'會有多少px會「漂浮」。 –

理論上由9999px，但正如你所看到的，默認行爲是使div不會像其內容那樣寬。當你將邊距減小到例如-25px時，你會看到效果更好：http://jsfiddle.net/mbtb5m7p/1/ – LinkinTED

並非.a1的內容不再包裝，而是.a1的內容不需要換行，因爲可用的內部空間已經被足夠寬的內部空間放在了它的負邊距內。

所以你的div.a1基本上是寬度.r +負邊距的值，這是拖出右邊的肢體和增加你的div的大小。

那是相當多的盒子模型是如何工作的，檢查出來here或here

來源

2015-05-19 13:38:26 BenLeah

#curious - 計算出的寬度值不是'.r的寬度'+負值的價值。在這種情況下，爲什麼邊緣會影響內容寬度，基於默認的盒子模型？ –

你是對的，不是文字上的補充，它只是感覺最簡單的解釋方式（與我鏈接的w3c規範大致相同）。所以'.a1'的寬度應該是100px，但是盒子的右邊緣已經被負邊距向右移動9999px，使得它的內部寬度現在爲10099px ...因此字符串不需要包裝...（哈哈，編輯爲我自己的數學這個簡單的總和，呃） – BenLeah

的保證金是什麼，取決於它的父元素（類/ ID）這裏R類爲類A1和A2。

1）現在您的父類（Class .r）的寬度爲100px，因此所有子類（類a1 & a2）都會繼承相同的寬度。

2）類a2沒有問題，該類與父類（.r）不是唯一的（不同的）屬性是完全正常的，因此行爲正確。

3）現在類爲.a1的情況，其行爲正確，直到它找到margin-right：negativeValue;。

因此，首先了解邊距，邊距是類/元素塊與其父類/元素塊之間的空間。例如margin-left：5px;因此，特定塊從左側離開5px後分別開始，分別用於其餘三側（頂部，底部，右側）

現在使用負值邊界時，它會使用它的功能是侵入其父塊邊界。這是超越了父母的界限。所以在這裏你指定了margin-right：-9999px;所以它超出了class .r的邊界，但它可能會給你一個想法--9999px是一個巨大的價值，應該把div放到屏幕之外，但是作爲有限的文本，它只能顯示文本所包含的區域。

在類a1中插入更多的文本，它肯定會超出屏幕範圍，但文本應該是綽綽有餘。

Graphical Explanation更新

來源

2015-05-19 13:59:25 divy3993

非常感謝。但我不明白你的意思，「但作爲有限的文字，它只顯示了文字所包含的區域。」當我在jsfiddle中測試時，如果'.a1'的''position'是'relative'，'.a1'的寬度將是9999 + 100px，而'absolute'不會。 –

很高興你找到了你的答案，但我試圖再次給出最好的解釋graphti.Still你發現任何問題隨時問。這裏是---- [鏈接]（http://www.divyashah.in/stackoverflow/images/margins.png） – divy3993

爲什麼大的負邊距會使絕對元素無法包裝？

回答

相關問題