Html 一个绝对定位的div如何影响它的孩子？

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

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

---

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

我认为属性

position:absolute | relative |……

在这里指示所描述的元素相对于其父/祖先的行为，而不是其子元素的行为

---

如果在每个部分上使用绝对定位，它们都将超出正常流量。这意味着您必须重新创建–正常–流动机制。我建议您阅读本节

与名称所暗示的相反，绝对定位元素将与其中的内容展开或收缩，只要您不指定宽度或高度

#abs1{
位置：绝对位置；
排名：0；
}
#abs2{
位置：绝对位置；
顶部：50px；
宽度：400px；
}

用任何内容填充这两个div，它们将相应地展开

---

对于用户操纵的div，您可以使用最小宽度和最小高度，也可以使用最大宽度和最大高度来将扩展保持在一个范围内。这也需要溢出：隐藏在内容大于最大属性的情况下。玩一玩，然后移动窗口以查看divs是如何伸缩的。

发布此消息以跟进调查结果

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

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

---

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

感谢链接。我想说的是，定位一个元素描述了它相对于其正常流的行为，而不总是相对于它的父/祖先。但是，将元素定位为非静态确实会立即影响任何定位为绝对的子元素，因为该元素将成为这些子元素的包含块。我正在寻找可能发生的任何其他影响。你找到解决方案了吗？如果有，请发邮件。

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

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