具有绝对定位的嵌套 div 会导致溢出问题

Question

>我有一个绝对定位的父div，其中包含一个标题div 和一个可调整大小的正文div，如下所示。正文div 包含一个内容div 和一个绝对定位的子项。

当身体调整大小时，我需要

1. 溢出要隐藏的父div 的内容
正文div，
2. 如果其内容(内容div 和子div 的组合(超过正文的尺寸，则显示滚动条。

示例显示执行第一部分，但滚动条仅在正文高度小于内容高度时显示，而不是在子div 的一部分被父边界隐藏时显示。

在纯CSS或涉及一些javascript中是否有解决方案？

<div id="parent" style="overflow:hidden;position: absolute; left: 50px; top: 50px; border-width: 1px; border-color: black; border-style: solid;">
<div id="header" style="border-color: red; border-width: 1px; border-style: solid;">
<p>No scroll bars in header</p>
</div>
<div id="body" style="width: 300px; height: 250px; border-width: 1px; border-color: blue; border-style: solid; overflow: auto; resize: both;">
<div id="content" style="border-width: 1px; border-color: grey; border-style: solid;">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div id="child" style="position:absolute; top:200px;left:100px;width: 50px; height: 50px; border-width: 1px; border-color: green; border-style: solid;"
<p>Child</p>
</div>
</div>
</div>

Answer 1

您需要将孩子的位置设置为relative。拥有absolute位置意味着它不会从 html 中获取任何内容。这有点像使用上帝模式。拥有relative意味着它将合并其父位置。在这种情况下，它是div#body

我调整了顶部和左侧值，也是因为它在将位置更改为相对位置后将子200px定位在远离内容位置的位置。

这是工作代码。请...使用 CSS 而不是属性style=""
这样，您将清除 html 代码，并且更容易阅读、编写和调试。

#parent {
overflow: hidden;
position: absolute;
left: 50px;
top: 50px;
border-width: 1px;
border-color: black;
border-style: solid;
}
#header {
border-color: red;
border-width: 1px;
border-style: solid;
}
#body {
width: 200px;
height: 170px;
border-width: 1px;
border-color: blue;
border-style: solid;
overflow: auto;
resize: both;
}
#content {
border-width: 1px;
border-color: grey;
border-style: solid;
}
#child {
position: relative;
top: 20px;
left: 30px;
width: 50px;
height: 50px;
border-width: 1px;
border-color: green;
border-style: solid;
}

<div id="parent">
<div id="header">
<p>No scroll bars in header</p>
</div>
<div id="body">
<div id="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div id="child">
<p>Child</p>
</div>
</div>
</div>

Answer 2

当你给出绝对位置时，元素相对于其第一个定位(非静态(祖先元素进行定位。在您的情况下，父级未定位或定位为静态。因此，子项将相对于视口进行定位。如果您希望子项相对于父项(正文(进行定位，则必须使父项位置相对。

<div id="body" style="position:relative; width: 300px; height: 250px; border-width: 1px; border-color: blue; border-style: solid; overflow: auto; resize: both;">