如何让position:relative父元素的position:absolute子元素超出overflow-y:auto祖父元素

需求是实现可滚动列表，每个列表项的徽章一半在容器外侧，但设置overflow-y:auto后徽章会被容器裁剪，z-index无效，position:fixed又无法跟随列表项滚动。

核心思路 #

把滚动逻辑和视觉容器分离：用一个外层容器控制整体宽度，内层滚动容器宽度缩小，留出徽章的显示空间，这样徽章就能从滚动容器的右侧溢出，同时跟着列表项滚动。

修改后的代码 #

CSS

/* 外层视觉容器，控制整体宽度，不设overflow */
.list-wrapper {
  width: 200px;
}

/* 内层滚动容器，宽度缩小，留出徽章空间 */
.overflow-y {
  overflow-y: auto;
  display: flex;
  flex-direction: column; 
  max-height: 100px;
  width: calc(100% - 5px); /* 减去徽章一半的宽度 */
}

.absolute {
  position: absolute;
  top: 0; 
  right: -5px; /* 徽章一半在列表项外 */
  width: 10px; /* 调整宽度确保一半在外 */
  height: 10px;
  background: red;
  border-radius: 50%; /* 可选，做成圆形徽章 */
}

.relative {
  position: relative;
  min-height: 80px;
  width: 100%; /* 占满滚动容器宽度 */
  border: 1px solid #eee; /* 可选，方便查看列表项范围 */
}

HTML

<div class="list-wrapper">
  <div class="overflow-y">
    <span class="relative">
      list-item
      <span class="absolute"></span>
    </span>
    <span class="relative">
      list-item
      <span class="absolute"></span>
    </span>
    <span class="relative">
      list-item
      <span class="absolute"></span>
    </span>
  </div>
</div>

补充说明 #

• 外层容器负责展示整体宽度，内层滚动容器只处理滚动，宽度缩小后，徽章的绝对定位就能突破滚动容器的裁剪范围
• 徽章的宽度和right值可以根据需求调整，确保一半在视觉容器外侧
• 这种方法不需要修改定位方式，徽章会自然跟随列表项滚动

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