html - 绝对定位的 div 如何影响其子级？

Question

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

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

理想的情况是，如果有人可以像在自己的页面上开发一样开发每个部分的内部内容。所以我担心的是 - 绝对定位父 div 如何影响将添加的子元素？

Answer 1

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

如果你在每个部分都使用绝对定位，它们都将超出正常流程。这意味着您将不得不重新创建-正常-流程机制。我建议您阅读正常流、浮动和定位的比较部分

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

发布此内容以跟进调查结果。

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

这是因为父元素将成为这些子元素的包含块，而不是静态的。在后一种情况下，子项的包含块将是第一个具有非静态位置的祖先。请参阅包含块的绝对定位和定义（感谢@Edouard Lopez）。因此，子元素的任何定位都将与绝对父元素相关。

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