Question

我有以下标记：

<div id="playArea" style="position: relative;">
    <div style="position: absolute; left: 295px; top: -1px; width: 313px; height: 269px;">Hello</div>
    <div 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>

但我希望在'playArea'div下有一段文字，但因为playArea中的所有div都是绝对的，所以文本不会出现在最后一个绝对定位div的底部。

我已经研究了这个并通过使用float：left和clear找到了一个替代方法：left但是在第一个div上使用这个方法之后，你不能正确定位div，因为第二个div的起点在第一个div之下而不是（0,0）。任何关于我如何通过这个获得的想法。

由于

Answer 1

如果我理解正确，你只需要给“playArea”div一个正确的高度。

编辑：我的意思是，其中所有内容的组合高度。

Answer 2

但我希望在'playArea'div下有一段文字，但是因为playArea中的所有div都是绝对的，所以文本不会出现在最后一个绝对定位div的底部。

由于你似乎已经知道了所有的尺寸和位置，只需添加另一个绝对定位的div并将相关内容放入其中。

我已经调查了这个并通过使用float：left和clear：left找到了一个替代方法但是在第一个div上使用这个方法后，你不能正确定位div，因为第二个div的起点是第一个div而不是（0,0）。关于我如何能够获得的任何想法。

您需要移除position: absolute以使浮动正确。只是宽度和高度就足够了。

Answer 3

将三个内部div留下，将overflow: hidden;放在playArea div上，并将<p>置于三个内部div下clear: both;

Answer 4

在阅读了你和“BalusC”之间的评论主题后，你似乎已经修改了你的CSS，现在正试图浮动你的项目，并使用margin-top和margin-left进行定位。你完全可以这样做，但你忘记了你也可以使用负边距来定位你的元素。例如，如果您使用 margin-top：-10px; ，那么它将向上拉元素（而不是将其向下推，就像正常的正值边距）。所有其他利润都是如此。

现在这似乎是你缺少的成分。

CSS：绝对定位的替代方法

4 个答案: