How To Pin Element Inside A Horizontally Scrollable Div

If I have a button with position: absolute inside of a div with overflow-x: auto the button will snap to the edge of the container. However, if the div's content overflows the hori

Solution 1:

Position fixed won't work because it's always relative to the page. You want to nest the elements inside another component that has a position relative. The elements inside will be positioned based on this parent.

.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>

Solution 2:

The closest I got was using 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>