位置为:绝对的元素下降
您可以在CodePen上编辑下面的代码。
null
.container {
margin: auto;
width: 700px;
height: 300px;
background: lightblue;
overflow-x: auto;
position: relative;
}
.child {
width: 50px;
height: 300px;
position: absolute;
top: 100%;
background: red;
}<div class="container">
<div class="child"></div>
</div>null
当添加绝对定位的子元素使父元素溢出时，父元素上的overflow-x:auto设置会扩展其高度。删除它，得到一个像你的第二个图像的结果。
null
.container {
margin: auto;
width: 700px;
height: 300px;
background: lightblue;
position: relative;
}
.child {
width: 50px;
height: 300px;
position: absolute;
top: 100%;
background: red;
}<div class="container">
<div class="child"></div>
</div>
请尝试以下操作:
.child {
width: 50px;
height: 300px;
position: absolute;
bottom: 0;
background: red;
}
我想这就是你需要的
