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

Question

如果我在带有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>

Answer 1

位置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>

Answer 2

我最近得到的是使用position: sticky。

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

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