Question

我们正在构建一个包含用户可以与之交互的多个部分的单页Web应用程序。我目前需要构建应用程序的主要布局，应将页面划分为不同的部分。 我无法控制将添加到每个部分的内部内容。

每个部分都应该能够被用户放大并将其他部分推出视图区域。因此，我正在考虑为每个部分使用绝对定位，以便正确定位它们并允许轻松更改视图上的位置。

理想的情况是，如果某人能够发展每个部分的内在内容，就好像他正在自己的页面上发展一样。所以我关心的是 - 父div的绝对定位如何影响将要添加的子元素？

Answer 1

我认为属性position: absolute|relative|...在这里表示所描述的元素相对于其父/祖先的行为，而不是其子行为的行为。

如果在每个部分使用绝对定位，它们都将超出正常流程。这意味着您将不得不重新创建-normal-flow-mechanism。我建议您阅读Comparison of normal flow, floats, and positioning

部分

Answer 2

与名称所暗示的相反，绝对定位元素将扩展或收缩其中的内容，只要您不指定宽度或高度即可。 http://jsfiddle.net/M3CZg/

#abs1 {
position:absolute;
top:0;
}
#abs2 {
position:absolute;
top:50px;
width: 400px;
}

<div id="abs1"></div>
<div id="abs2"></div>

使用任何内容填充这两个div，它们将相应扩展。

对于用户操作的div所说的内容，您可以使用min-width和min-height以及max-width和max-height来使扩展保持在一个范围内。这也需要溢出：隐藏以防内容大于最大属性。 http://jsfiddle.net/M3CZg/3/玩弄它并移动窗口以查看div如何弯曲。

Answer 3

发布此信息以跟进调查结果。

主要问题是将元素定位为非静态元素会对任何定位为绝对的子元素产生直接影响。

这是因为父元素将成为这些子元素的包含块，而不是它是静态的。在后一种情况下，儿童的包含块将是第一个具有非静态位置的祖先。见Absolute positioning＆amp; Definition of containing block（感谢@Edouard Lopez）。因此，子元素的任何定位都与绝对父元素有关。

另外，正如@fredsbend所描述的那样，绝对定位的div元素将根据其包含的元素的宽度而扩展，而不是根据其容器扩展，这对于静态定位的div来说就是这种情况。如果孩子没有明确的宽度设置，这也会影响他们。

绝对定位的div如何影响其孩子？

3 个答案: