In the table-like container, I have elements with horizontal scrolling. Each element has the same width but potentially different heights. I want to add a button in the top-right corner of each element without it disappearing when scrolling.
I came across this solution that addresses a similar issue for a single item in a scrollable div. However, this method positions the button relative to the container, which doesn't work for multiple elements.
My current approach is as follows:
.container {
width: 400px;
position: relative;
overflow-x: auto;
}
.table {
display: table;
}
.row {
/*
If the row isn't relative, all buttons stick to the
container top.
However, the buttons are now also out of view
due to the overflow.
*/
position: relative;
/* Just to make the content overflow */
white-space: nowrap;
/* For a clearer distinction between rows */
padding: 0.5rem;
border-bottom: 1px solid black;
}
.button {
/* The button needs to be in line with the parent row */
top: 0;
right: 0;
position: absolute;
}<div class="container">
<div class="table">
<div class="row">
<div>
Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
</div>
<button class="button">1</button>
</div>
<div class="row">
<div>
Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
<br>
This one is however a bit taller than the other items.
</div>
<button class="button">2</button>
</div>
<div class="row">
<div>
Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
</div>
<button class="button">3</button>
</div>
</div>
</div>