Html 防止绝对定位的子对象扩展可滚动区域

我有一个固定大小的可滚动父div，其中包含两个子div：第一个子div包含内容，应该决定可滚动区域的大小。第二种是动态移动的小覆盖，不应影响可滚动区域的大小。也就是说，如果覆盖在内容的底部边缘，并且用户一直向下滚动（假设内容比父div大），那么一旦到达内容的底部，滚动应该停止，即使这意味着只有部分覆盖可见

这有可能实现吗

例如，使用此HTML：

这个CSS：

#父级{
位置：相对位置；
高度：400px；
宽度：400px；
溢出：自动；
边框：1px纯红；
}
#覆盖层{
位置：绝对位置；
高度：20px；
宽度：20px；
背景颜色：浅蓝色；
顶部：413px；
左：15px；
}

（），浏览器允许用户滚动内容的底部，直到整个覆盖（蓝色方块）可见，而我希望它在图像底部可见时停止，使覆盖的底部50%仍然隐藏

---

对于我的用例，我可以在必要时对HTML进行调整。

将方形框和img放在同一个容器中（

#content

），并设置

溢出：隐藏在上面


#父级{
位置：相对位置；
高度：400px；
宽度：400px；
溢出：自动；
边框：1px纯红；
}
#内容{
溢出：隐藏；
位置：相对位置；
}
#覆盖层{
位置：绝对位置；
高度：20px；
宽度：20px；
背景颜色：浅蓝色；
顶部：413px；
左：15px；
}

能否设置底部：0；在overlay类中，删除顶部：413px；定义？覆盖层的用途是什么？为什么会在那里？你能给出一个更完整的用例吗？也许解决方案就是做不同的事情。这是一个用户可以控制的指针，用户可以放置它。当放置在图像底部或右侧附近时，需要切断边缘上的悬挂部分（如鼠标光标到达屏幕边缘时），而不是扩展可滚动区域。为了澄清，如果内容小于父div，则可以将部分覆盖显示在内容之外，但是在任何情况下，父div的滚动距离都不应超过不存在覆盖的情况下的滚动距离。