overflow:hidden导致绝对定位容器被裁剪的解决方案（不可修改指定CSS）

问题背景 #

当父级（或更高层级）元素同时设置position:relative和overflow:hidden时，其内部的绝对定位子元素会被裁剪。当前场景存在以下矛盾：

• 保留.relative-container的overflow:hidden时，菜单被裁剪，但超长文本不会产生横向滚动
• 移除overflow:hidden时，菜单显示正常，但超长文本导致页面出现横向滚动
• 要求不可修改.relative-container和.long-text的CSS规则，同时实现菜单正常显示、无横向滚动的效果

解决方案：将菜单移出父容器并动态定位 #

核心思路：把绝对定位的菜单元素从.relative-container中移出，使其不受父容器overflow:hidden的影响；通过JavaScript计算触发按钮的位置，动态设置菜单坐标，保证菜单始终显示在按钮附近。

修改后的代码实现 #

HTML结构调整

将.menu元素从.relative-menu中移出，放到<body>标签末尾：

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
      <div class="relative-container">
        <span class="long-text">
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
        </span>
        <div class="relative-menu">
          <button onclick="toggleMenu()">
            Open Menu
          </button>
        </div>
      </div>
      <!-- 菜单移至此处 -->
      <div class="menu hide">
        <li>Menu Item 1</li>
        <li>Menu Item 2</li>
        <li>Menu Item 3</li>
      </div>
      <script>
        function toggleMenu() {
          const menu = document.querySelector(".menu");
          const button = document.querySelector(".relative-menu button");
          if (menu && button) {
            const btnRect = button.getBoundingClientRect();
            // 动态设置菜单相对于按钮的位置
            menu.style.top = `${btnRect.bottom + window.scrollY}px`;
            menu.style.left = `${btnRect.left + window.scrollX - 30}px`;
            
            if (menu.classList.contains('show')) {
              menu.classList.remove('show');
              menu.classList.add('hide');
            } else {
              menu.classList.remove('hide');
              menu.classList.add('show');
            }
          }
        }
      </script>
  </body>
</html>

CSS调整（仅修改菜单样式，不触碰指定类）

移除菜单硬编码的top和left值，改为通过JS动态定位：

body{
  padding: 25px;
}
.relative-container {
  background-color: brown;
  overflow: hidden;
  position: relative;
  color: white;
}
.relative-menu {
  position: relative;
}
.long-text {
  white-space: nowrap;
}
.menu {
  position: absolute;
  background-color: green;
  z-index: 99999;
}
.menu.hide {
  display:none;
}
.menu.show {
  display: block;
}

效果说明 #

• .relative-container的overflow:hidden依然生效，超长文本被隐藏，无横向滚动
• 菜单元素脱离父容器范围，不会被裁剪，始终显示在按钮左下方
• 完全符合要求：未修改.relative-container和.long-text的CSS规则

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