设置position absolute的下拉菜单在overflow scroll中失效，如何修复？

当容器必须保留overflow属性时，absolute定位的下拉菜单容易被容器裁剪，以下是几种可行的解决方案：

方案1：将下拉菜单移出overflow容器 #

把下拉菜单放到overflow容器的外部，和容器同级，借助容器的相对定位来对齐下拉菜单的位置，这样下拉菜单就不会被容器的overflow属性影响。

<div class="overflow-container">
  <button class="dropdown-trigger">点击展开下拉</button>
</div>
<!-- 下拉菜单移到容器外 -->
<div class="dropdown-menu">
  <ul>
    <li>选项一</li>
    <li>选项二</li>
    <li>选项三</li>
  </ul>
</div>

.overflow-container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: auto; /* 保留overflow属性 */
  border: 1px solid #ddd;
  padding: 10px;
}
.dropdown-trigger {
  cursor: pointer;
}
.dropdown-menu {
  position: absolute;
  top: 50px;
  left: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  display: none;
}
/* hover时显示下拉菜单 */
.dropdown-trigger:hover + .dropdown-menu,
.dropdown-menu:hover {
  display: block;
}

方案2：用clip-path替代overflow:hidden #

如果容器使用的是overflow:hidden，可以用clip-path属性替换，它只会裁剪容器自身的内容，不会影响子元素的absolute定位。

.overflow-container {
  position: relative;
  width: 300px;
  height: 200px;
  /* 替换overflow:hidden */
  clip-path: inset(0 0 0 0);
  border: 1px solid #ddd;
}
.dropdown-menu {
  position: absolute;
  top: 40px;
  left: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

方案3：JavaScript动态计算定位 #

通过JavaScript获取触发按钮的位置，将下拉菜单设置为fixed定位，实时调整它的位置，让它相对于视口显示，脱离overflow容器的限制。

<div class="overflow-container">
  <button class="dropdown-trigger" id="trigger">点击展开下拉</button>
  <div class="dropdown-menu" id="dropdown">
    <ul>
      <li>选项一</li>
      <li>选项二</li>
      <li>选项三</li>
    </ul>
  </div>
</div>

.overflow-container {
  width: 300px;
  height: 200px;
  overflow: auto;
  border: 1px solid #ddd;
  padding: 10px;
}
.dropdown-trigger {
  cursor: pointer;
}
.dropdown-menu {
  position: fixed; /* 相对于视口定位 */
  background-color: #fff;
  border: 1px solid #ddd;
  display: none;
}

const trigger = document.getElementById('trigger');
const dropdown = document.getElementById('dropdown');

trigger.addEventListener('mouseenter', () => {
  const rect = trigger.getBoundingClientRect();
  dropdown.style.display = 'block';
  dropdown.style.top = `${rect.bottom}px`;
  dropdown.style.left = `${rect.left}px`;
});

dropdown.addEventListener('mouseleave', () => {
  dropdown.style.display = 'none';
});

方案4：拆分容器，只给内容区加overflow #

将容器拆分为头部（放置触发按钮和下拉菜单）和内容区（设置overflow），下拉菜单放在头部的相对定位容器内，这样就不会被内容区的overflow裁剪。

<div class="container-wrapper">
  <div class="header">
    <button class="dropdown-trigger">点击展开下拉</button>
    <div class="dropdown-menu">
      <ul>
        <li>选项一</li>
        <li>选项二</li>
        <li>选项三</li>
      </ul>
    </div>
  </div>
  <div class="content-area">
    <!-- 长内容 -->
    <p>这里是需要滚动的内容...这里是需要滚动的内容...这里是需要滚动的内容...这里是需要滚动的内容...这里是需要滚动的内容...这里是需要滚动的内容...这里是需要滚动的内容...这里是需要滚动的内容...</p>
  </div>
</div>

.container-wrapper {
  width: 300px;
  border: 1px solid #ddd;
}
.header {
  position: relative;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.content-area {
  height: 180px;
  overflow: auto; /* 只给内容区设置overflow */
  padding: 10px;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  display: none;
}
.dropdown-trigger:hover + .dropdown-menu,
.dropdown-menu:hover {
  display: block;
}

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