如何让Dropdown List显示在所有position: relative父元素上方并跟随标签

• 需求：容器内的下拉列表点击激活后，需显示在所有父元素上方。
• 当前问题：下拉菜单被容器遮挡，无法突破父元素层级完整显示。
• 已尝试方案：使用position: absolute时，下拉可正常显示在父元素上方，但在滚动区域中，下拉列表会固定在初始位置，无法跟随触发标签移动；使用position: relative则会被容器的overflow属性裁剪，无法完整展示。

核心思路是让下拉菜单脱离滚动容器的裁剪限制，同时通过JavaScript动态计算并更新位置，确保它始终跟随触发按钮移动：

1. 修正HTML重复ID问题：所有复选框的id不能重复，否则点击标签时只有第一个复选框生效，需给每个复选框设置唯一ID，对应标签的for属性同步修改。
2. 调整下拉菜单定位：将.ddlist设置为position: fixed，脱离滚动容器的层级，同时移除滚动容器父级的overflow: hidden，避免裁剪下拉元素。
3. JavaScript动态控制：
   • 点击按钮时，计算按钮的位置，设置下拉菜单的坐标，使其显示在按钮下方。
   • 监听滚动容器的滚动事件，实时更新下拉菜单的位置，确保跟随按钮移动。
   • 点击页面其他区域时，自动关闭所有下拉菜单。

修改后的代码 #

HTML #

<html>
<body>
<div class="land">
  <div class="mainmenu">
      <div class="left">
          <div class="left-selection">
              <div class="ddgroup">
                  <ul class="ddmenu">
                      <input type="checkbox" id="ctrl-1" class="dd-ctrl"/>
                      <label class="btn" for="ctrl-1">Click me!</label> 
                      <ul class="ddlist">
                          <li><a href="#">Sub-1</a></li>
                          <li><a href="#">Sub-2</a></li>
                          <li><a href="#">Sub-3</a></li>
                      </ul> 
                  </ul>
                  <ul class="ddmenu">
                      <input type="checkbox" id="ctrl-2" class="dd-ctrl"/>
                      <label class="btn" for="ctrl-2">Click me!</label>          
                      <ul class="ddlist">
                          <li><a href="#">Sub-1</a></li>
                          <li><a href="#">Sub-2</a></li>
                          <li><a href="#">Sub-3</a></li>
                      </ul> 
                  </ul>
                  <ul class="ddmenu">
                      <input type="checkbox" id="ctrl-3" class="dd-ctrl"/>
                      <label class="btn" for="ctrl-3">Click me!</label>          
                      <ul class="ddlist">
                          <li><a href="#">Sub-1</a></li>
                          <li><a href="#">Sub-2</a></li>
                          <li><a href="#">Sub-3</a></li>
                      </ul> 
                  </ul>
                  <!-- 更多下拉菜单同理，依次修改id和for属性 -->
              </div>   
          </div>
      </div>
      <div class="right">
          <div class="right-selection">
            <h1>Test</h1>
            <h1>Test</h1>
          </div>
      </div>
  </div>
</div>
<script>
const ctrlBtns = document.querySelectorAll('.btn');
const ddLists = document.querySelectorAll('.ddlist');
const scrollContainer = document.querySelector('.left-selection');

// 设置下拉菜单位置
function setDropdownPos(btn, list) {
  const btnRect = btn.getBoundingClientRect();
  list.style.left = `${btnRect.left}px`;
  list.style.top = `${btnRect.bottom}px`;
}

// 点击按钮切换下拉显示/隐藏
ctrlBtns.forEach((btn, index) => {
  const ctrl = btn.previousElementSibling;
  const list = btn.nextElementSibling;

  btn.addEventListener('click', () => {
    // 关闭其他下拉
    ddLists.forEach((l, i) => {
      if (i !== index) {
        l.style.display = 'none';
        document.querySelectorAll('.dd-ctrl')[i].checked = false;
      }
    });

    if (ctrl.checked) {
      list.style.display = 'block';
      setDropdownPos(btn, list);
    } else {
      list.style.display = 'none';
    }
  });
});

// 滚动时更新下拉位置
scrollContainer.addEventListener('scroll', () => {
  ddLists.forEach((list, index) => {
    if (list.style.display === 'block') {
      setDropdownPos(ctrlBtns[index], list);
    }
  });
});

// 点击页面其他区域关闭下拉
document.addEventListener('click', (e) => {
  if (!e.target.closest('.ddmenu')) {
    ddLists.forEach(list => list.style.display = 'none');
    document.querySelectorAll('.dd-ctrl').forEach(ctrl => ctrl.checked = false);
  }
});
</script>
</body>
</html>

CSS #

html,body{
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.land{
  display: grid;
  grid-template-rows: 1fr 8fr;
  height: 100vh;
}

.mainmenu{
  border: solid 2px grey;
  width: 100%;
  height: 80px;
  display: flex;
  position: relative;
  /* 移除overflow:hidden，避免裁剪下拉菜单 */
}

.left{
  width: 50%;
  max-width: 50%;
}

.left-selection{
  display: flex;
  overflow-y: hidden;
  overflow-x: scroll;
  height: 100%;
}

.right{
  width: 50%;
  max-width: 50%;
}

.right-selection{
  display: flex;
  overflow-y: hidden;
  overflow-x: scroll;
}

.ddgroup{
  display: flex;
}

.ddmenu{
  margin: 0 10px;
  padding: 0;
  position: relative;
}

.btn{
  padding: 10px;
  background: #eee;
  cursor: pointer;
  display: inline-block;
  margin-top: 15px;
}

.ddlist{
  position: fixed;
  display: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: white;
  border: 1px solid #ccc;
  z-index: 9999; /* 确保层级最高 */
}

.ddlist li{
  padding: 8px 12px;
}

.ddlist li:hover{
  background: #f0f0f0;
}

/* 隐藏原生复选框 */
.dd-ctrl{
  display: none;
}

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