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 一个高度值，绝对 div 不会扩展它们的父级

Answer 3

在这种情况下，playArea div 不会自动扩展宽度/高度以适应其中的元素，并且由于它没有定义高度，因此它被视为不占用任何空间（这意味着

标签将出现在与 div 相同的位置）。

如果您事先不知道 playArea div 的尺寸，或者它们可能会发生变化，最好使用浮动、清除和边距来布局您的元素，以实现与当前相同的布局。

如果您还没有这样做，请获取 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 之类的任何东西的尺寸，其中包含的元素不像普通页面元素那样布局（绝对定位或不定位）。这样，您将拥有更可预测的布局。