如何让滚动容器内的position absolute下拉菜单随父元素滚动悬浮？

当然可以实现啦！你遇到的问题其实是因为滚动容器的overflow: auto属性限制了绝对定位元素的显示范围——一旦容器设置了overflow，里面的绝对定位元素就会被“框”在容器内部，超出的部分自然就被裁剪了。下面给你两种靠谱的解决方案，你可以根据需求选择：

方案一：纯CSS调整（推荐静态场景） #

思路是把下拉菜单从滚动容器的“限制”里抽离出来，让它相对于页面body定位，同时通过CSS变量精准对齐到对应的导航项。

修改后的完整代码：

/* 给body设置相对定位，作为下拉菜单的定位参考 */
body {
  position: relative;
  margin: 0;
}

.navbar { 
  padding-left: 0; 
  white-space: nowrap; 
  overflow: auto; 
  /* 去掉滚动容器的相对定位，避免限制下拉菜单的定位范围 */
  position: static;
  background: #fff;
} 

.navbar-item { 
  position: relative; 
  margin-left: 0; 
  list-style: none; 
  display: inline-block; 
  width: 200px; 
  text-align: center; 
  border: 1px solid #ccc;
  padding: 8px 0;
} 

.dropdown { 
  position: absolute; 
  padding-left: 0; 
  width: 200px; 
  box-shadow: 0 1px 0 1px rgba(0,0,0,0.2); 
  display: none; 
  z-index: 999; /* 确保下拉菜单在最上层 */
  background: #fff;
} 

.dropdown-item { 
  margin-left: 0; 
  list-style: none; 
  padding: 8px 0;
  border-bottom: 1px solid #ccc;
}

.dropdown-item:last-child {
  border-bottom: none;
}

/* 鼠标悬停时显示下拉菜单，并通过CSS变量设置位置 */
.navbar-item:hover .dropdown { 
  display: block;
  left: var(--dropdown-left);
  top: var(--dropdown-top);
}

<ul class="navbar"> 
  <li class="navbar-item" style="--dropdown-left: 0px; --dropdown-top: 42px;"> 
    <a>Item A</a> 
    <ul class="dropdown"> 
      <li class="dropdown-item">Sub Item A</li> 
      <li class="dropdown-item">Sub Item B</li> 
      <li class="dropdown-item">Sub Item C</li> 
    </ul> 
  </li> 
  <li class="navbar-item" style="--dropdown-left: 202px; --dropdown-top: 42px;"><a>Item B</a></li> 
  <li class="navbar-item" style="--dropdown-left: 404px; --dropdown-top: 42px;"><a>Item C</a></li> 
  <li class="navbar-item" style="--dropdown-left: 606px; --dropdown-top: 42px;"><a>Item D</a></li> 
  <li class="navbar-item" style="--dropdown-left: 808px; --dropdown-top: 42px;"><a>Item E</a></li> 
</ul>

这里的--dropdown-left是根据每个导航项的宽度+边框计算出来的，--dropdown-top是导航项的高度，你可以根据自己的样式调整数值。

方案二：JavaScript动态定位（适合动态场景） #

如果你的导航项数量、宽度是动态变化的，用JS自动计算位置会更省心，而且能在滚动容器滚动时实时更新下拉菜单的位置：

先调整基础CSS： #

body {
  margin: 0;
}

.navbar { 
  padding-left: 0; 
  white-space: nowrap; 
  overflow: auto; 
  background: #fff;
} 

.navbar-item { 
  position: relative; 
  margin-left: 0; 
  list-style: none; 
  display: inline-block; 
  width: 200px; 
  text-align: center; 
  border: 1px solid #ccc;
  padding: 8px 0;
} 

.dropdown { 
  position: absolute; /* 相对于body定位 */
  padding-left: 0; 
  width: 200px; 
  box-shadow: 0 1px 0 1px rgba(0,0,0,0.2); 
  display: none; 
  z-index: 999;
  background: #fff;
} 

.dropdown-item { 
  margin-left: 0; 
  list-style: none; 
  padding: 8px 0;
  border-bottom: 1px solid #ccc;
}

.dropdown-item:last-child {
  border-bottom: none;
}

然后添加JS代码： #

// 获取所有带下拉菜单的导航项
const navbarItems = document.querySelectorAll('.navbar-item');
const navbar = document.querySelector('.navbar');

navbarItems.forEach(item => {
  const dropdown = item.querySelector('.dropdown');
  if (!dropdown) return;

  // 鼠标悬停时计算并设置下拉菜单位置
  item.addEventListener('mouseenter', () => {
    const itemRect = item.getBoundingClientRect();
    const bodyRect = document.body.getBoundingClientRect();
    
    // 转换为相对于body的坐标
    dropdown.style.display = 'block';
    dropdown.style.left = `${itemRect.left - bodyRect.left}px`;
    dropdown.style.top = `${itemRect.bottom - bodyRect.top}px`;
  });

  // 鼠标离开时隐藏下拉菜单
  item.addEventListener('mouseleave', () => {
    dropdown.style.display = 'none';
  });
});

// 滚动容器时，更新当前显示的下拉菜单位置
navbar.addEventListener('scroll', () => {
  const activeDropdown = document.querySelector('.dropdown[style="display: block;"]');
  if (!activeDropdown) return;

  const parentItem = activeDropdown.closest('.navbar-item');
  const itemRect = parentItem.getBoundingClientRect();
  const bodyRect = document.body.getBoundingClientRect();
  
  activeDropdown.style.left = `${itemRect.left - bodyRect.left}px`;
});

这个方案会自动计算每个导航项的位置，而且当滚动容器横向滚动时，下拉菜单会跟着对应的导航项一起移动，完全不会被裁剪。

补充说明：为什么原来的代码不行？ #

当你给.navbar设置overflow: auto时，这个容器就形成了一个块级格式化上下文（BFC）。在BFC内部，所有position: absolute的元素都会以这个容器为定位参考，并且超出容器边界的部分会被自动裁剪——这就是为什么你的下拉菜单只能显示在滚动区域里的原因。

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