什麼是這個div崩潰的例子？

Here is the jsfiddle來說明我的問題。什麼是這個div崩潰的例子？

我有一個沒有高度的浮動div（.card）。它包含一個帶圖像的嵌套div（.image）。圖像使.card的邊界框展開以包裹圖像。

然而，當我巢一個第二個div（.text）內.card作爲同級.image和使用負邊距在圖像的頂部到位置.text，圖像不再管理擴大的.card包圍盒以匹配圖像的底部。代替.card的底部邊界向上並且沿着.text的底部邊界。

當.text存在時，爲什麼圖像不能成功擴展其祖父母？

<div class="card"> 
    <div class="image"> 
    <img src="https://dl.dropboxusercontent.com/u/55892413/jsfiddle/image.jpg" width="200px"></div> 
</div> 
<div class="card"> 
    <div class="image"> 
    <img src="https://dl.dropboxusercontent.com/u/55892413/jsfiddle/image.jpg" width="200px"></div> 
    <div class="text"></div> 
</div> 

img { 
    display: block; 
} 

.card { 
    border: 1px solid black; //shows where the bounding-box of this div is 
    width: 200px; 
    position: relative; 
    float: left; 
} 

.text { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    margin-top: -120px; 
    position: relative; 
}

來源

2016-07-29 pastic

太令人困惑的問題。我想知道你會得到更多的看法..請清除你的問題多一點。謝謝 –

如果你沒有錯，你想要這個https://jsfiddle.net/LeoLion/sc8bn4t3/11/ –

請看下面。（我有很多工作，不能立即回覆） – pastic

如果m沒有弄錯你的觀點，那麼你缺少的位置：絕對。

請記住，只有當父div是相對和內部元素絕對時，才能固定內部元素的位置。

修訂

這個問題是存在的，因爲你要使用.TXT（子）內.card（父）相對但走錯了路的位置。記住，每當你使用職位時，父母應該是親戚的，孩子將是絕對的，所以孩子將在父母容器內移動而不會破壞流程（在你的情況下，它會影響父母的div並打破邊界），所以在這個問題上使用位置：絕對的孩子，然後你可以輕鬆地使用.txt類。

只需在.text類中更改position: relative;to position: absolute;即可。

請參閱here

來源

2016-08-01 07:45:41

嗨。是和不是。絕對定位是我在相關網站上使用以獲得所需效果（圖像疊加在文本上）。但我並不是要求解決方案，我想了解爲什麼（未通過）小提琴的情況發生，從而加深了我的CSS。將紅框添加到等式中時，邊框不再繞過圖像的效果不是隨機的，是嗎？但我不明白爲什麼會這樣。 – pastic

@pastic請閱讀我對這個問題的解決方案。我只是沒有發佈答案，但也行。我說要把圖像放在元素的絕對位置上，它只會與相對的父元素一起工作，否則它的行爲就像開箱即用，那就是發生了什麼。 –

也檢查我更新的答案。希望它會有所幫助。 –

什麼是這個div崩潰的例子？

回答

相關問題