父元素设overflow-x:hidden时绝对定位子元素Y轴被截断问题

问题描述 #

我想让绝对定位的子元素仅在Y轴方向溢出其容器，但一旦给容器设置overflow-x: hidden，子元素在Y轴方向也没法溢出了，不清楚原因。

预期效果是：蓝色的绝对定位盒子能在Y轴方向超出粉色容器的范围完整显示，X轴方向被粉色容器裁剪；但实际运行代码后，蓝色盒子的Y轴超出部分也被截断了。

原代码示例 #

CSS #

#d1 {
  background: #efe;
  padding: 5px;
  width: 125px;
}

#d2 {
  position: relative;
  background: #fee;
  padding: 2px;
  width: 100px;
  height: 100px;
  overflow-x: hidden;
  overflow-y: visible;
}

#d3 {
  position: absolute;
  top: 10px;
  background: #eef;
  padding: 2px;
  width: 75px;
  height: 150px;
}

HTML #

<br/><br/><br/>
<div id="d1" >
  <div id="d2" >
    <div id="d3"></div>
  </div>
</div>

原因解析 #

这是CSS规范的既定行为：当元素设置overflow-x: hidden时，若同时将overflow-y设为visible，浏览器会自动把overflow-y重置为auto或hidden。CSS不允许单独设置一个方向的overflow为hidden，另一个为visible（默认的overflow: visible除外）。

解决方案 #

把绝对定位的子元素从设置了overflow的容器中移出，让它的定位父级换成外层没有overflow限制的元素，同时保持视觉位置一致。

修改后的代码示例：

CSS #

#d1 {
  background: #efe;
  padding: 5px;
  width: 125px;
  position: relative; /* 新增，作为d3的定位父级 */
}

#d2 {
  background: #fee;
  padding: 2px;
  width: 100px;
  height: 100px;
  overflow-x: hidden; /* 仅限制自身X轴溢出 */
}

#d3 {
  position: absolute;
  top: calc(5px + 2px + 10px); /* 计算位置：d1内边距 + d2内边距 + 原top值 */
  left: calc(5px + 2px); /* 对齐d2的内部位置 */
  background: #eef;
  padding: 2px;
  width: 75px;
  height: 150px;
}

HTML #

<br/><br/><br/>
<div id="d1" >
  <div id="d2" ></div>
  <div id="d3"></div> <!-- 移到d2外面 -->
</div>

调整后，d2的overflow-x: hidden只会裁剪自身内部内容，d3作为d1的绝对定位子元素，Y轴方向可以正常溢出显示，同时X轴宽度小于d2，不会超出d1范围，符合预期效果。

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