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: 1rem1rem;
    overflow-x: auto;
    margin: 0;
}
.top-containerbutton {
    position: absolute;
    right: 0;
    top: 0;
}

<divclass="top-container"><button>Copy</button><preclass="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: 1rem1rem;
    position: relative;
    overflow-x: auto;
}
.containerbutton {
    position: sticky;
    right: 0;
    top: 0;
}

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