滚动后让absolute定位元素与祖先元素保持对齐的解决方案

问题根源 #

你的菜单用了position: absolute，但它的父元素.row是默认的position: static（静态定位），所以绝对定位的菜单会相对于页面根元素（body/html）定位。当滚动.layout容器时，.row在容器内的视觉位置变了，但它在文档流里的位置没改变，导致菜单还是固定在最初的文档流位置，没法跟着.row走。

修复步骤 #

1. 给父元素添加相对定位
   给菜单的直接父元素.row加上position: relative，这样绝对定位的子元素（菜单）就会以这个父元素为定位基准，不管容器怎么滚动，都会和父元素保持相对位置。

2. 调整菜单的定位样式
   原来的菜单样式是相对于页面居中，现在要改成相对于父元素.row居中，同时调整位置到父元素的下方（或你需要的位置）。

修改后的代码 #

CSS 关键修改

.row{
  height:50px;
  width: 100%;
  border: solid 1px #a5a5a5;
  cursor: pointer;
  color: red;
  position: relative; /* 新增相对定位 */
}
.menu{
  display:none;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: fit-content;
  background: #e7e7e7;
  padding: 0.8em;
  left: 50%; /* 相对于父元素左侧偏移50% */
  transform: translateX(-50%); /* 向左偏移自身宽度的50%，实现水平居中 */
  top: 100%; /* 定位到父元素底部 */
  margin: 0; /* 移除原有的自动外边距 */
}

JS 和 HTML 保持不变

原有的点击切换逻辑和页面结构不需要修改，直接沿用即可。

原理说明 #

• position: relative不会改变元素在文档流中的位置，仅为它的绝对定位子元素提供定位参考坐标系。
• left:50% + transform:translateX(-50%)是实现元素相对于父元素水平居中的通用方案，比left:0;right:0;margin:auto更适配父元素宽度不固定的场景。
• top:100%让菜单刚好贴合在父元素底部，保持和父元素相邻的预期位置。

修改后，无论怎么滚动.layout容器，点击.row时菜单都会精准对齐到父元素的下方居中位置，不会再出现偏移问题。

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