html - 如何将元素固定在水平滚动div中

如果我在position: absolute的div内有一个overflow-x: auto的按钮，则该按钮将对齐容器的边缘。

但是，如果div的内容超出了水平宽度，则滚动后该按钮将保持固定在容器内其开始位置。



看来absolute应该将其固定在侧面，但似乎并不能解决问题

有什么方法可以将子级内容固定在水平滚动div的右侧吗？

最小，完整，可验证的示例

.container {
    width: 20rem;
    border: 1px solid grey;
    padding: 1rem 1rem;
    position: relative;
    overflow-x: auto;
}
.container button {
    position: absolute;
    right: 0;
    top: 0;
}

<pre class="container">Multi Line Text
Long piece of content that overflows the width of container<button>Copy</button></pre>

最佳答案

位置fixed不起作用，因为它总是相对于页面。您想将元素嵌套在另一个位置relative的组件内。内部元素将基于该父元素定位。

.top-container {
    position: relative;
    width: 20rem;
    border: 1px solid grey;
}

.container {
    padding: 1rem 1rem;
    overflow-x: auto;
    margin: 0;
}
.top-container button {
    position: absolute;
    right: 0;
    top: 0;
}

<div class="top-container">
  <button>Copy</button>
  <pre class="container">Long piece of content that overflows the width of container</pre>
</div>