CSS：定位绝对的替代方法答案

【问题标题】：CSS: Alternative method to positon absoluteCSS：定位绝对的替代方法
【发布时间】：2010-12-29 19:07:47
【问题描述】：

我有以下标记：

<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)。关于我如何得到这个的任何想法。

谢谢

【问题讨论】：

你有一个可行的例子吗？或者至少以此为例。
我没有，因为我目前正在使用本地主机。抱歉，请参阅我刚刚在 BalusC 下方添加的评论，这更多地描述了问题

标签： css css-position css-float

【解决方案1】：

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

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

【讨论】：

嘿，我确实意识到您可以使用负边距，但这只是意味着首先将前一个 div 的高度远离当前 div 的边距，我认为这是一种非常讨厌的做事方式
执行你需要做的最干净和最简单的方法是不浮动任何元素。正如 Kaze no Koe 所提到的，只需为#playArea 添加一个高度。根据您提供的信息，我无法想象有比他建议的更好或更简单的方法。

【解决方案2】：

将三个内部 div 向左浮动，将 overflow: hidden; 放在 playArea div 上，然后将您的 <p> 放在三个内部 div 下方，clear: both;

【讨论】：

【解决方案3】：

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

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

我已经对此进行了调查，并通过使用 float:left 和 clear:left 找到了替代方法，但是在第一个 div 上使用此方法后，您无法正确定位 div，因为第二个 div 的起点位于下方第一个 div 而不是 (0,0)。关于我如何得到这个的任何想法。

您需要删除 position: absolute 才能使浮动正确。宽度和高度就足够了。

【讨论】：

我已经删除了 position: absolute，并将 top 和 left 更改为 margin-top 和 margin-left。但是在第二个和后面的其他 div 上，起始位置不在 playArea (0,0) 的左上角，而是在第一个 div 下的位置。因此，如果第一个 div 位于 (30,0) 并且高度为 100px，那么第二个 div 将从 (30,100) 开始，但我希望它是 (0,0) 注意：括号中的这些是坐标(X,Y)
毕竟，实际上很难理解您到底喜欢在哪里放置文本。在三个 div 中最低 div 下方的块元素中？您可以在其中添加另一个绝对定位的 div 并将段落放入其中。
是的，我希望将文本放在三个 div 中最低的一个块元素中。如果我要使用绝对定位它，那么我相信这会引发两个问题。 1. 如果不定位它们，我永远无法将它们放在页面上 2. 我的页脚是绝对定位的，所以我不想每次都更改它并计算应该在哪里

【解决方案4】：

如果我理解正确，您只需为“playArea”div 指定正确的高度。

编辑：我的意思是，里面所有东西的总高度。

【讨论】：