如何将列表元素定位在overflow:scroll容器外侧相邻位置？

嘿，我完全懂你花5小时卡在定位问题上的崩溃感！咱们先拆解下问题根源，再一步步搞定它。

问题出在哪？ #

你现在的粉色列表是放在带overflow-y:scroll的<li>内部，还用了position:absolute试图把它拉到外侧——但这种做法有两个核心问题：

1. 绝对定位元素是相对于父级<li>的，当这个<li>滚动时，粉色列表会跟着一起滚动，没法固定在外侧；
2. HTML结构不规范：<ul>的直接子元素必须是<li>，你用<div>包裹*ngFor的写法不符合规范，可能会干扰浏览器的布局计算。

解决方案：调整结构+Flex布局 #

咱们把粉色列表和滚动容器改成平级关系，用Flex布局让它们并排，这样粉色列表自然就处于滚动容器的外侧，不会受滚动影响。

修改后的完整代码：

<div style="background-color: gray; width: 100%; height: 100vh; display: flex; justify-content: center;">

  <div style="display: flex; flex-direction: column; background-color: rgb(248, 83, 83); width: 300px; position: sticky; bottom:0;">

    <div style="width: 100%;  border: 1px solid black;">Something</div>

    <!-- 修复结构：ul直接子元素是li，ngFor移到li上 -->
    <ul>
      <li *ngFor="let x of elementList" style="display: flex; border: 1px solid black;">
        <!-- 滚动容器：占满横向可用空间 -->
        <div style="flex: 1; height: 500px; overflow-y: scroll;">
          <span>{{x.Title}}</span>
          <!-- 这里放原来<li>里的其他滚动内容 -->
        </div>
        <!-- 粉色列表：放在滚动容器外侧，平级排列 -->
        <div style="background: pink; width: 50px;">
          <li>{{x.Subtitle}}</li>
          <li>{{x.Subtitle}}</li>
          <li>{{x.Subtitle}}</li>
          <li>{{x.Subtitle}}</li>
        </div>
      </li>
    </ul>

    <div style="border: 1px solid black; width: 100%; display: flex; gap: 10px; padding: 5px;">
      <span class="material-icons-outlined">arrow_back</span>
      <span>Hide navigation</span>
    </div>

  </div>

  <div style="background-color: rgb(152, 247, 152); width: 100%; height: 100%;"></div>

</div>

关键调整点说明： #

• 修复HTML结构：把*ngFor直接绑定到<li>上，移除了<ul>内部的<div>，符合HTML规范；
• Flex布局并排：给每个循环的<li>设置display: flex，让内部的滚动容器和粉色列表横向排列；
• 滚动容器占满空间：给滚动容器加flex:1，让它自动填充粉色列表之外的剩余宽度；
• 移除绝对定位：粉色列表不需要绝对定位，靠Flex布局自然处于外侧，不会随滚动容器滚动。

这样调整后，粉色列表就稳定在滚动容器的右侧相邻位置，滚动容器内部内容滚动时，粉色列表也不会跟着动啦！

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