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之类的任何尺寸，其中所包含的元素不会像普通页面元素一样布置（无论是否定位）。 这样，您将拥有一个更加可预测的布局。