Html CSS：在绝对定位的 div 之后有一个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1955543/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: have a div after an absolute positioned div
提问by phpNutt
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 ptag is not appearing under all of these div's in the browser.
Any ideas how i can do this?
现在，如果我在 last 之后创建一个段落标记，则标记</div>的内容p不会出现在浏览器中的所有这些 div 下。任何想法我怎么能做到这一点？
Thanks guys
谢谢你们
回答by Kevin Conner
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.
如果您使用绝对定位但不知道定位的高度，那么 HTML 不太擅长解决这个问题。我已经看到（并且可能写过）使用 JavaScript 根据offsetHeight另一个元素定位元素的技巧。
But you might be better off using the CSS floatproperty instead of absolute positioning. floatand clearare pretty good for positioning things like you want, without sacrificing automatic page flow.
但是您最好使用 CSSfloat属性而不是绝对定位。 float并且clear非常适合定位您想要的东西，而不会牺牲自动页面流。
回答by Steve H
You'll have to give the playArea a height value, absolute divs will not expand their parent
你必须给 playArea 一个高度值，绝对 div 不会扩展它们的父级
回答by Henry C
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
在这种情况下， playArea div 不会自动扩展宽度/高度以适应其中的元素，并且由于它没有定义高度，所以它被视为不占用任何空间（这意味着
tag will appear at the same location as the div).
标签将出现在与 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.
如果您事先不知道 playArea div 的尺寸，或者它们可能会改变，最好使用浮动、清除和边距来布局您的元素，以实现与您当前相同的布局。
If you haven't already do so, get the Firebugplug 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.
如果您还没有这样做，请为 Firefox安装Firebug插件 - 这将使您的 CSS 生活无限轻松，因为您可以编辑 CSS 并即时查看更改。不过也不要忘记在其他浏览器中进行测试。
Edit: Here's an example done up with floats (did it in a rush so might not be perfect)
编辑：这是一个用浮点数完成的例子（匆忙完成，所以可能不完美）
<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>
回答by Piers Mana
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.
因为绝对定位的元素不会“填充” playArea div 的框，所以您分配给每个子 div 的高度和宽度不会扩展 playArea 的高度和宽度。我不确定您要解决的最终问题是什么，但是根据您的 id 名称，您正在尝试将元素定位在“画布”区域内。这很好。
The heights and widths of the absolutely positioned divs, again, have no impact on the playArea div's dimensions, but by knowingthe 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.
同样，绝对定位的 div 的高度和宽度对 playArea div 的尺寸没有影响，但是通过了解高度和宽度，您可以告诉 playArea 它的尺寸应该是什么。在这种情况下，为 playArea 提供 580px 的宽度和 785px 的高度将正确定位 p 元素。
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.
再次离开你的 div id，明确定义像 playArea 之类的任何东西的尺寸是个好主意，其中包含的元素不像普通页面元素那样布局（绝对定位或不定位）。这样，您将拥有更可预测的布局。
