滚动时Dropdown无法随Button移动的CSS定位问题求助

核心解决方案 #

• 给每个.DropDown容器添加position: relative，作为下拉菜单的定位上下文
• 调整.Categories的定位属性，确保它精准显示在对应按钮正下方

问题原因分析 #

之前的问题根源在于下拉菜单缺少正确的定位父级：

• 若把CategoryBlock设为relative，下拉菜单会相对于整个导航容器定位，既无法锚定单个按钮，还会因溢出容器触发垂直滚动条
• 未设置定位上下文时，absolute定位的下拉菜单会相对于页面根元素固定，导航栏滚动时自然不会跟随按钮移动

将定位上下文转移到每个.DropDown后，下拉菜单会跟随按钮所在的容器同步移动，同时保留absolute不影响布局的特性。

修改后的完整CSS代码 #

.CategoryBlock {
  margin-top: 0.5rem;
  gap: 1rem;
  display: flex;
  overflow-x: scroll;
  scrollbar-width: thin;
}

.CategoryBlock>*:first-child {
  margin-left: auto;
}

.CategoryBlock>*:last-child {
  margin-right: auto;
}

/* 新增：给每个下拉容器设置定位上下文 */
.DropDown {
  position: relative;
}

.CategoryBlock button {
  font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 2rem;
  border: 0;
  color: #2e652d;
  background-color: white;
}

.CategoryBlock button:hover {
  color: #51b44f
}

.Categories {
  position: absolute;
  display: none;
  border: #2e652d;
  background-color: hsl(0, 0%, 95%);
  border-color: #2e652d;
  border-style: solid;
  border-width: thin;
  max-width: 10rem;
  /* 新增：确保下拉菜单紧贴按钮底部 */
  top: 100%;
  left: 0;
  /* 可选：提升层级避免被其他元素遮挡 */
  z-index: 100;
}

.DropDown a {
  display: block;
  text-decoration: none;
  color: #63815f;
  font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 1.125rem;
  margin: 0rem 0.5rem 1rem 0.5rem;
}

.DropDown a:hover {
  text-decoration: underline;
}

.DropDown:hover .Categories {
  display: block;
}

关键修改点说明 #

1. 为.DropDown添加position: relative，让下拉菜单的absolute定位基于按钮所在容器
2. 给.Categories设置top: 100%和left: 0，实现下拉菜单与按钮的底部对齐
3. 移除按钮上多余的position: relative，以及CategoryBlock上的relative设置，避免干扰定位逻辑

修改后，滚动导航栏时下拉菜单会跟随对应按钮同步移动，同时不会影响页面布局或触发不必要的垂直滚动条。

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