css - 位置div到包含div的底部

如何將div放置到包含div的底部？css - 位置div到包含div的底部

<style> 
.outside { 
    width: 200px; 
    height: 200px; 
    background-color: #EEE; /*to make it visible*/ 
} 
.inside { 
    position: absolute; 
    bottom: 2px; 
} 
</style> 
<div class="outside"> 
    <div class="inside">inside</div> 
</div>

此代碼將文本「內部」放在頁面的底部。

來源

2013-03-12 nagy.zsolt.hun

.outside needs'position：relative;' – Imperative 2013-03-12 10:26:11

relative，然後它不知道要保存子節點內容需要多大，所以除非這是一個靜態值，否則返回到原來的問題。如何將一個div放在另一個div的底部（暗示：「沒有破壞所有東西」）。 – JosephK 2017-08-20 11:40:55

110

.outside { 
    width: 200px; 
    height: 200px; 
    background-color: #EEE; /*to make it visible*/ 
}

需要是

.outside { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    background-color: #EEE; /*to make it visible*/ 
}

絕對定位查找DOM中的最近的相對定位的父，如果一個沒有定義將使用的身體。

來源

2013-03-12 10:26:06 Karl

謝謝。你能解釋爲什麼嗎？ – 2013-03-12 10:27:18

+31

「絕對」搜索最近的「親屬」父親。默認情況下它是'document'的'body'。因此，如果沒有父DOM對象（'.outside'）具有「相對」屬性，則'.inside'將會轉到body標籤的底部。 – 2013-03-12 10:29:31

「*絕對定位查找DOM中最近的相對定位的父級，如果沒有定義，它將使用body。*」您剛剛爲我解釋**非常**！現在我真的開始瞭解CSS。 ***謝謝！*** – 2014-04-28 21:22:23

將position:relative指定爲.outside，然後將position:absolute; bottom:0;指定給您的.inside。

像這樣：

.outside { 
    position:relative; 
} 
.inside { 
    position: absolute; 
    bottom: 0; 
}

來源

2013-03-12 10:26:10 lifetimes

簡單而真棒。 – 2015-06-09 15:51:11

這可能是粘性頁腳的基礎不可能嗎？ – 2015-08-23 16:12:23

我不能使用position：absolute;爲第二個div。那是我的限制，你能否給我其他選擇？ – 2016-06-29 06:18:17

添加position: relative到.outside。（https://developer.mozilla.org/en-US/docs/CSS/position）

相對定位的元素仍然被認爲是文檔中元素的正常流動。相反，完全放置的元素會從流中取出，因此在放置其他元素時不會佔用空間。絕對定位的元素相對於最近定位的祖先而定位。如果定位的祖先不存在，則使用初始容器。

「初始容器」將爲<body>，但添加上述內容將使.outside定位。

來源

2013-03-12 10:30:39

IMO的最佳答案;它實際上有一個解釋！ – Bojangles 2013-03-12 10:34:52

css - 位置div到包含div的底部

回答

相關問題