时间戳

首页 > 解决方案 > 溢出-x：自动和位置：绝对

html - 溢出-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>

标签： htmlcsscss-positionabsolute

解决方案

当添加了溢出父级的绝对定位子元素时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>

推荐阅读