可滚动可调整大小Div中固定按钮滚动偏移问题求助

我编写了如下HTML和CSS代码，实现了一个可滚动、可调整大小的container Div，其中包含一个按钮和内容Div：

原CSS代码 #

.container {
  width: 100%;
  max-width: 100%;
  height: 150px;
  position: relative;
  overflow: auto;
  resize: both;
  white-space: nowrap;
  background: lightgray;
}

.container .fixed {
  position: absolute;
  right: 5px;
  top: 5px;
}

原HTML代码 #

<div class="container">
  <button class="fixed">Test</button>
  <div class="content">
    texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
  </div>
</div>

预期按钮固定在container Div的右上角，调整Div大小时该表现正常，但滚动Div内容时按钮会随滚动移动，请问如何修改代码解决此问题？

问题原因 #

当容器设置overflow: auto后，它会成为滚动容器，此时绝对定位的按钮是相对于容器的内容滚动区域定位的，而非容器的可视区域，所以滚动内容时按钮会跟着内容一起移动。

修改方案 #

添加一个外层包裹容器，让按钮相对于这个外层容器绝对定位，脱离原滚动容器的内容区域影响。

修改后的CSS代码

/* 新增外层容器作为定位父级 */
.wrapper {
  position: relative;
  display: inline-block; /* 自适应容器宽度，也可设置固定宽度如width: 80% */
}

.container {
  width: 100%;
  max-width: 100%;
  height: 150px;
  overflow: auto;
  resize: both;
  white-space: nowrap;
  background: lightgray;
  /* 移除原position: relative，不再作为按钮的定位父级 */
}

.fixed {
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 1; /* 确保按钮在滚动内容上方，避免被遮挡 */
}

修改后的HTML代码

<div class="wrapper">
  <button class="fixed">Test</button>
  <div class="container">
    <div class="content">
      texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext<br>
      text<br>
      text<br>
      text<br>
      text<br>
      text<br>
      text<br>
      text<br>
      text<br>
      text<br>
      text<br>
      text<br>
      text<br>
      text<br>
      text<br>
    </div>
  </div>
</div>

效果说明 #

• 外层.wrapper作为按钮的定位参考，按钮始终固定在容器可视区域的右上角
• 原.container保持可滚动、可调整大小的特性，滚动内容时按钮不会跟随移动
• z-index: 1确保按钮不会被滚动的内容遮挡

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