CSS问题：滚动container div时固定子菜单至按钮下方

问题根源在于子菜单的定位上下文错误：.modal_sub_menu使用position: absolute，但没有父级元素提供定位参考，导致它相对于整个文档定位，而非按钮所在的滚动容器。滚动时按钮随内容移动，子菜单却固定在视口位置。

修改方案如下：

调整后的CSS代码 #

div.container {
  height: 200px;
  width: 400px;
  border: 1px solid black;
  overflow-y: scroll;
}

.filter_container {
  padding: 40px;
  position: relative; /* 添加定位上下文，让子菜单以此为基准定位 */
}

.index_filters_selected__NkclA {
  display: flex;
  gap: 5px;
  align-items: center;
  cursor: pointer;
  background-color: #eceff4;
  border-radius: 8px;
  padding: 8px;
  width: fit-content;
}

.modal_sub_menu {
  position: absolute;
  top: 100%; /* 让子菜单紧贴容器底部，即按钮正下方 */
  margin-top: 8px; /* 可选，增加与按钮的间距 */
  border: 1px solid #d6d9e5;
  border-radius: 8px;
  padding: 24px;
  background-color: #ffffff;
  z-index: 55;
}

关键修改说明 #

• 给.filter_container设置position: relative，让子菜单的absolute定位以该容器为基准，而非整个文档。
• top: 100%确保子菜单从容器底部开始排列，刚好对齐按钮下方。
• 滚动.container时，.filter_container随内容滚动，子菜单会同步跟随，始终保持在按钮下方。

内容的提问来源于stack exchange，提问作者Matthieu Planté