CSS：在绝对定位的div之后有一个div
我想知道如何做到这一点，我当前的标记如下：
<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>
现在，如果我在最后一个 之后创建一个段落标记，则 p 的内容code> 标签未出现在浏览器中的所有这些 div 下。 我有什么想法可以做到这一点吗？
谢谢大家
I was wondering how to do this, my current mark up is as follows:
<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>
Now, if I create a paragraph tag after the last </div>, the content of the p tag is not appearing under all of these div's in the browser.
Any ideas how i can do this?
Thanks guys
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
如果您使用绝对定位但不知道要定位的高度，那么 HTML 不太擅长解决这个问题。我见过（也可能写过）一些 hack，其中 JavaScript 用于根据另一个元素的
offsetHeight来定位一个元素。但您可能最好使用 CSS
float属性而不是绝对定位。float和clear非常适合定位您想要的内容，而不会牺牲自动页面流。If you're using absolute positioning but you don't know the height of what you're positioning, that is a problem that HTML isn't very good at solving. I have seen (and probably written) hacks where JavaScript is used to position an element based on the
offsetHeightof another.But you might be better off using the CSS
floatproperty instead of absolute positioning.floatandclearare pretty good for positioning things like you want, without sacrificing automatic page flow.你必须给 playArea 一个高度值，绝对 div 不会扩展它们的父级
You'll have to give the playArea a height value, absolute divs will not expand their parent
在这种情况下，playArea div 不会自动扩展宽度/高度以适应其中的元素，并且由于它没有定义高度，因此它被视为不占用任何空间（这意味着标签
将出现在与div）。
如果您事先不知道 playArea div 的尺寸或者它们可能会发生变化，那么最好使用 float、clear 和 margin 来布局您的元素，以实现与当前相同的布局。
如果您还没有这样做，请获取 Firefox 的 Firebug 插件 - 这将使您的 CSS 生活变得更加轻松，因为您可以编辑 CSS 并即时查看更改。不过，也不要忘记在其他浏览器中进行测试。
编辑：这是一个用浮动完成的示例（匆忙完成，所以可能不完美）
The playArea div in this case will not automatically expand in width/height to fit the elements within, and since it has no height defined, it is treated as not taking up any room (which means that the
tag will appear at the same location as the div).
If you don't know the dimensions of the playArea div before hand or they are likely to change, it would be better to layout your elements using float, clear and margin to achieve the same layout you've currently got.
If you haven't already do so, get the Firebug plug in for Firefox - this will make your CSS life infinitely easier, as you can edit CSS and see the changes on the fly. Don't forget to test in other browsers too, though.
Edit: Here's an example done up with floats (did it in a rush so might not be perfect)
由于绝对定位的元素不会“填充” playArea div 的框，因此您为每个子 div 分配的高度和宽度不会扩展 playArea 的高度和宽度。我不确定您要解决的最终问题是什么，但是根据您的 id 名称，您试图将元素放置在“画布”区域内。这很好。
同样，绝对定位 div 的高度和宽度对 playArea div 的尺寸没有影响，但是通过了解高度和宽度，您可以告诉 playArea 其尺寸应该是多少。在这种情况下，为 playArea 指定宽度 580px 和高度 785px 将正确定位 p 元素。
再次离开你的 div id，明确定义诸如 playArea 之类的任何内容的尺寸是一个好主意，其中包含的元素不像普通页面元素那样布局（绝对定位或非绝对定位）。这样，您将拥有更可预测的布局。
Because absolutely positioned elements do not "fill" the box of the playArea div, the height and width you assign each child div do not expand playArea's height and width. I'm not sure what the final problem is that you're trying to solve, but from the names of your ids you're trying to position elements within a "canvas" area. This is good.
The heights and widths of the absolutely positioned divs, again, have no impact on the playArea div's dimensions, but by knowing the heights and widths you are able to tell playArea what its dimensions should be. In this case, giving playArea a width of 580px and height of 785px will position the p element correctly.
Going off of your div ids again, it's a good idea to explicitly define the dimensions of anything like a playArea where the contained elements aren't laid out like normal page elements (absolutely positioned or not). That way, you'll have a more predictable layout.