如何让平板端下拉菜单精准定位在顶部栏正下方？

你的核心问题是平板端的火车下拉菜单无法精准定位在父按钮正下方，根源在于两个关键问题：

1. 下拉菜单的父容器.tablet-train-dropdown未设置position: relative，导致绝对定位的参考对象是页面根元素而非按钮容器
2. 用固定top:10vh绑定顶部栏高度，而非相对父按钮的位置，缩放时必然错位

修复步骤： #

1. 给平板端下拉容器添加相对定位

在媒体查询中为.tablet-train-dropdown设置相对定位，让下拉菜单以它为定位基准：

@media only screen and (max-width: 1300px){
    /* ... 保留原有样式 ... */
    .tablet-train-dropdown{
        position: relative;
        width: 100%;
    }
    /* ... 保留原有样式 ... */
}

2. 调整下拉菜单的定位参数

将.tablet-train-elements的top值改为100%（刚好贴合父按钮底部），同时确保对齐父容器：

@media only screen and (max-width: 1300px){
    /* ... 保留原有样式 ... */
    .tablet-train-elements{
        display: none;
        width: 100%;
        flex-direction: column;
        position: absolute;
        top: 100%; /* 相对于父容器底部对齐 */
        left: 0; /* 与父容器左侧对齐 */
        background-color: #7f9dfd;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
    /* ... 保留原有样式 ... */
}

3. 统一JS显示/隐藏逻辑（用类名替代直接操作style）

原MobileTrainDropdown直接修改style.display，和桌面端逻辑不一致，改为类名切换：
首先新增CSS显示类：

.tablet-show{
    display: flex !important;
}

然后修改JS函数：

function MobileTrainDropdown() {
  const trainElements = document.getElementById("tablet-trains");
  trainElements.classList.toggle("tablet-show");
}

同时在窗口点击事件中添加平板下拉菜单的关闭逻辑：

window.addEventListener("click", function (event) {
  console.log("Window click detected on:", event.target);

  // Close train dropdown if clicked outside the dropdown button
  if (!event.target.closest('.dropdown-button')) {
    const dropdowns = document.getElementsByClassName("train-elements");
    for (let i = 0; i < dropdowns.length; i++) {
      const openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
        console.log("Closed train dropdown:", openDropdown);
      }
    }
    // 新增：关闭平板端火车下拉菜单
    const tabletDropdown = document.getElementById("tablet-trains");
    if (tabletDropdown.classList.contains('tablet-show')) {
      tabletDropdown.classList.remove('tablet-show');
    }
  }

  // Close mobile nav menu if clicked outside menu button and nav bar
  const navBar = document.getElementById("phone-nav-bar");
  const menuButton = document.querySelector('.menu-button');
  if (navBar && menuButton && !menuButton.contains(event.target) && !navBar.contains(event.target)) {
    navBar.classList.remove("show-nav-bar");
    console.log("Closed mobile nav menu.");
  }
});

4. 修正顶部栏定位（可选）

给.top-bar添加相对定位，确保移动端导航栏的绝对定位参考正确：

.top-bar {
    display: flex;
    align-items: center;
    height: 10vh;
    background-color: #A7C4FF;
    position: relative; /* 新增 */
}

修改后效果 #

平板端下拉菜单会精准贴合父按钮底部，无论屏幕如何缩放都不会错位，因为使用了相对父容器的top:100%而非固定高度值，同时统一了显示/隐藏逻辑，代码更易维护。

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