CSS：絕對位置div之后有一個div

Question

我想知道如何執行此操作，我當前的標記如下：

<div id="playArea" style="position: relative;">
    <div id="widget1" class="widget" style="position: absolute; left: 295px; top: -1px; width: 313px; height: 269px;">Hello</div>
    <div id="widget2" class="widget" style="position: absolute; left: 63px; top: 35px; width: 80px; height: 42px;">World</div>
    <div style="position: absolute; left: 534px; top: 329px; width: 183px; height: 251px;">Bye</div>
</div>

現在，如果我在最后一個</div>之后創建一個段落標簽，則p標簽的內容不會出現在瀏覽器中所有這些div的下面。 任何想法我該怎么做？

多謝你們

Answer 1

如果您使用的是絕對定位，但是您不知道所定位的高度，那么HTML就不能很好地解決這個問題。 我已經看到（並且可能寫過）黑客，其中JavaScript用於根據另一個元素的offsetHeight定位元素。

但是使用CSS float屬性而不是絕對定位可能會更好。 float和clear非常適合在不犧牲自動頁面流動的情況下定位所需的內容。

Answer 2

您必須給playArea一個height值，絕對div不會擴展其父級

Answer 3

在這種情況下，playArea div不會自動在寬度/高度上進行擴展以適合其中的元素，並且由於未定義高度，因此將其視為未占用任何空間（這意味着

標簽將顯示在與div相同的位置）。

如果您事先不知道playArea div的尺寸，或者它們可能會更改，則最好使用float，clear和margin來布局元素，以實現與當前相同的布局。

如果您尚未這樣做，請獲取適用於Firefox的Firebug插件-這將使您的CSS生活變得更加輕松，因為您可以編輯CSS並即時查看更改。 不過，也不要忘記在其他瀏覽器中進行測試。

編輯：這是一個用浮子完成的示例（匆忙完成，所以可能並不完美）

<div id="playArea" style="float: left;">
    <div id="widget2" class="widget" style="background-color: green; float: left; margin-left: 63px; margin-top: 35px; width: 80px; height: 42px;">World</div>
    <div id="widget1" class="widget" style="background-color: red; float: left; margin-left: 152px; margin-top: -1px; width: 313px; height: 269px;">Hello</div>
    <div style="background-color: blue; float: left; clear: left; margin-left: 534px; margin-top: 26px; width: 183px; height: 251px;">Bye</div>
</div>
<p style="clear: both; float: left;">Test P Element</p>

Answer 4

由於絕對定位的元素不會“填充” playArea div的框，因此，分配給每個子div的高度和寬度不會擴展playArea的高度和寬度。 我不確定您要解決的最終問題是什么，但是從id的名稱開始，您試圖將元素放置在“畫布”區域內。 很好

同樣，絕對定位的div的高度和寬度也不會影響playArea div的尺寸，但是通過了解高度和寬度，您可以告訴playArea其尺寸應為多少。 在這種情況下，為playArea設置580px的寬度和785px的高度將正確定位p元素。

再次離開div ID，最好是明確定義諸如playArea之類的任何尺寸，其中所包含的元素不會像普通頁面元素一樣布置（無論是否定位）。 這樣，您將擁有一個更加可預測的布局。