如何让绝对定位元素在滚动溢出容器中正常显示

你的问题核心是滚动容器的overflow属性裁剪了子元素的绝对定位后代——.list设置了overflow-y: scroll，它会创建一个裁剪上下文，所有超出这个容器边界的内容都会被隐藏，包括.content里的.overflow元素。

下面是三种可行的解决思路：

方法一：调整绝对定位元素的定位上下文 #

把绝对定位元素的定位父级从.content提升到.modal，让它脱离.list的裁剪范围：

1. 给.modal添加position: relative，作为.overflow的定位基准
2. 移除.content的position: relative（若保留则需重新计算.overflow的定位坐标）
3. 调整.overflow的定位值，使其相对于.modal显示在目标位置

修改后的代码：

.modal {
  width: 300px;
  border: 1px solid red;
  margin: 0 auto;
  position: relative; /* 添加定位基准 */
}

.list {
  width: 100%;
  max-height: 500px;
  margin: 0;
  padding: 0;
  overflow-y: scroll;
}

.content {
  list-style: none;
  height: 200px;
  border: 1px solid rgb(46, 20, 20);
  /* 移除原有的position: relative */
}

.overflow {
  position: absolute;
  left: -50px; /* 相对于modal左侧偏移 */
  top: calc(var(--item-index) * 201px + 50px); /* 用CSS变量控制垂直位置，201px为.content高度+边框 */
  border: 1px solid green;
  height: 100px;
  width: 100px;
}

<div class="modal">
  <ul class="list">
    <li class="content" style="--item-index: 0">
      Content area
      <div class="overflow">overflow</div>
    </li>
    <li class="content" style="--item-index: 1">
      Content area
      <div class="overflow">overflow</div>
    </li>
    <li class="content" style="--item-index: 2">
      Content area
      <div class="overflow">overflow</div>
    </li>
    <li class="content" style="--item-index: 3">
      Content area
      <div class="overflow">overflow</div>
    </li>
  </ul>
</div>

方法二：禁用滚动容器的横向裁剪（需注意布局影响） #

如果列表不需要横向裁剪，可以给.list设置overflow-x: visible，但部分浏览器可能会强制将其转为auto，需测试兼容性：

.list {
  width: 100%;
  max-height: 500px;
  margin: 0;
  padding: 0;
  overflow-y: scroll;
  overflow-x: visible; /* 允许横向溢出 */
}

方法三：使用CSS overflow-clip-margin（现代浏览器支持） #

如果目标浏览器支持overflow-clip-margin（Chrome 90+、Firefox 89+），可以直接设置允许内容超出容器的范围，无需修改定位逻辑：

.list {
  width: 100%;
  max-height: 500px;
  margin: 0;
  padding: 0;
  overflow-y: scroll;
  overflow-clip-margin: 50px; /* 允许向左溢出50px，匹配.overflow的left偏移值 */
}

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