为何设置overflow-x: hidden会使绝对定位元素被隐藏？

核心原因 #

当你给.container设置overflow-x: hidden时，根据CSS规则，会自动把overflow-y的默认值visible重置为auto——CSS不允许单独设置一个方向的overflow为hidden/scroll/auto，同时让另一个方向保持visible（除非用较新的overflow: clip属性）。

这时.container的高度只由内部的.box决定，而.box的高度仅包含按钮的高度（因为.menu是绝对定位，不占文档流空间）。.menu的位置超出了.container的高度范围，自然就被overflow-y: auto的容器给裁切隐藏了。

解决方法 #

• 方法1：显式设置overflow-y: visible
  给.container加上overflow-y: visible，强制垂直方向溢出可见：

  .container {
      overflow-x: hidden;
      overflow-y: visible;
  }
  

• 方法2：调整布局，让.container不裁切垂直内容
  如果不需要.container管垂直方向的溢出，可以把overflow-x: hidden移到更上层元素（比如<body>），或者调整结构让.menu的定位不受.container的overflow影响。

• 方法3：使用overflow: clip（现代浏览器支持）
  overflow: clip是新增属性，支持单独控制单方向的溢出裁切，不会影响另一方向的默认行为：

  .container {
      overflow-x: clip;
      overflow-y: visible;
  }
  

优化后的代码示例 #

调整后的CSS：

.container {
    overflow-x: hidden;
    overflow-y: visible;
}

.box {
    position: relative;
    width: 160px;
}

.button {
    width: 100%;
    background-color: blue;
    color: #fff;
    border: none;
    padding: 8px;
    cursor: pointer;
}

.menu {
    position: absolute;
    top: 100%; /* 用top:100%代替固定像素，适配按钮高度变化 */
    width: 100%;
    background-color: green;
    padding: 8px 0;
    margin: 0;
    list-style: none;
}

.menu div {
    padding: 4px 8px;
    color: #fff;
}

HTML保持原结构即可，此时.menu会正常显示在按钮下方，不会被隐藏。

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