溢出-x：自动且位置：绝对

问题描述

带有position: absolute的元素出现故障

而不是这样：

您可以在codepen上编辑以下代码。

.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>

解决方法

添加绝对定位的子元素会使父对象溢出时，父对象上的overflow-x: auto设置扩展的高度。删除它以获得与第二张图片一样的结果。

.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;
}

我认为这就是您所需要的