absolute定位的Popup Div不随页面滚动问题求助

我制作了一个用于提供自动补全选项的简易Popup div，希望它定位在文本中创建它的位置，且覆盖而非挤占其他内容，因此为该div设置CSS：

position: absolute;
z-index: 1;

该设置基本符合预期，但弹窗不会随其覆盖的其他内容滚动。根据W3Schools对absolute定位的定义：

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed) ... However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

我的页面中所有其他元素均未显式指定position，默认使用static定位，按描述absolute应为合适选项，但relative、fixed、sticky这些支持z-index的定位选项也无法解决问题，请问我忽略了什么？

核心问题是你没关注滚动容器的定位上下文：

• 当弹窗覆盖的内容所在容器设置了overflow: auto或overflow: scroll时，这个容器就是独立的滚动区域。如果该容器保持默认的static定位（未显式设置position: relative/absolute/fixed/sticky），你的absolute弹窗会相对于body定位——而滚动容器的滚动是内部滚动，body并未跟随滚动，所以弹窗自然不会跟着滚动容器移动。

解决步骤：

1. 定位到弹窗所依附的滚动容器（就是滚动时弹窗没跟着动的那个容器）
2. 给这个滚动容器添加position: relative——这个属性不会改变容器的正常布局，只是为内部的absolute元素提供定位上下文
3. 确保弹窗的top/left等定位坐标是相对于该滚动容器计算的，避免位置偏移

如果添加relative后弹窗被滚动内容遮挡，可调高弹窗的z-index值（比如设为z-index: 999），确保它始终在滚动内容上方。

内容的提问来源于stack exchange，提问作者Richard Pawson