如何確定相對位置div擴展為包含其中的所有絕對位置div？

Question

說我有類似的東西

<body><div id="a"><div id="b">some content</div></div>more content<body>

而且我不知道“某些內容”的高度。 但是我將#b設置為位置：絕對，而#a設置為位置：相對，因此#b的位置是#a左上角的相對位置。 有什么方法可以使#a擴展為包含#b，從而使“更多內容”被推送？

謝謝

Answer 1

用relative代替absolute可能會得到您想要的東西，例如jsFiddle 。

Answer 2

您的示例有缺陷，因為實際上沒有必要在div＃b上使用pos：abs，因為默認情況下，該元素將設置在div＃a的頂部/左側。

使用css position會將其應用的元素置於普通標記流之外，即使您在div＃b上使用pos：rel也只會增加div＃a的高度，而不會考慮您可能也擁有的任何定位適用於它。

有一種方法可以實現您所追求的目標，但這將依賴於使用JavaScript。

Answer 3

聽起來#b的相對位置可能是一個更好的解決方案。

由於#b是#a中的第一個元素，它自然會出現在#a的左上角，因此position relative將相對於與絕對位置相同的點進行定位。

另外，假設您想將#b向下推30px，然后進行設置

#b{position:relative;top:30px;margin-bottom:30px;}

內容將清除#b的底部，因為position：relative在內容流中留下了一個等於#b + 30px高度的塊；

Answer 4

不會。絕對定位可從文檔流中刪除元素。 他們的父標簽和兄弟標簽沒有辦法知道它們是否與絕對定位元素重疊。