父div设置overflow:auto时如何显示超出父容器的绝对定位子div

问题根因 #

当绝对定位的父元素设置overflow-y: auto（非visible值）时，父元素会作为子绝对定位元素的包含块，同时会裁剪所有超出其边界的内容，包括绝对定位的子元素，这是CSS的标准渲染规则。

解决方案1：使用overflow-clip-margin扩展裁剪边界（适合需要保留父子DOM结构的场景） #

给父元素新增overflow-clip-margin属性，设置足够大的外延值，让超出父元素横向范围的子元素不会被裁剪，同时保留纵向滚动能力。
修改后的CSS代码：

.parent {
    width: 100px;
    height: 200px;
    background-color: rgb(39, 172, 255);
    position: absolute;
    overflow-y: auto;
    /* 新增：设置足够覆盖子元素超出范围的裁剪外延值，这里子元素横向超出130px（180+50-100），设置150px足够 */
    overflow-clip-margin: 150px;
}
.child {
    width: 50px;
    height: 50px;
    background-color: rgb(255, 196, 0);
    position: absolute;
    left: 180px;
}

注意：该属性兼容性支持Chrome 90+、Firefox 103+、Safari 16.0+，如果需要兼容低版本浏览器请用方案2。

解决方案2：拆分DOM结构（兼容所有浏览器） #

拆分父容器结构，将「定位容器」和「滚动容器」分离，绝对定位的子元素直接挂载到定位容器下，不放在滚动容器内部，就不会被滚动容器的overflow裁剪：

修改后的HTML代码：

<!-- 外层作为定位容器，不设overflow -->
<div class="parent-container">
  <!-- 内层作为滚动容器，承载需要纵向滚动的内容 -->
  <div class="scroll-area"></div>
  <!-- 绝对定位子元素和滚动容器平级，不会被裁剪 -->
  <div class="child"></div>
</div>

修改后的CSS代码：

.parent-container {
    width: 100px;
    height: 200px;
    position: absolute;
}
.scroll-area {
    width: 100%;
    height: 100%;
    background-color: rgb(39, 172, 255);
    overflow-y: auto;
}
.child {
    width: 50px;
    height: 50px;
    background-color: rgb(255, 196, 0);
    position: absolute;
    left: 180px;
    top: 0;
}

如果需要子元素跟随父容器内部的滚动内容移动，可通过监听scroll-area的滚动事件动态调整子元素的top值实现。

内容的提问来源于stack exchange，提问作者pullidea-dev