如何在滚动子项时保持元素的位置

Question

在进行水平滚动时，我需要将按钮保持在以下代码段中的位置。但没有固定的位置使用，因为我想摆脱疯狂的位置计算。

谢谢

<div style="position: relative; height: 100px; width: 400px; background-color: yellow; overflow: auto">
<button style="position: absolute">
must be visible all time
</button>
<button style="position: absolute; right: 0;">
must be visible all time
</button>
<div style="height: 100px; width: 600px; background-color: red">
<br>
scroll this
</div>
</div>

Answer 1

您可以对按钮进行包装，并使用sticky定位它们，将顶部和左侧的位置设置为0。

.container {
position: relative;
height: 100px;
width: 400px;
background-color: yellow;
overflow: auto;
}
.container__actions {
position: sticky;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
background-color: aqua;
}
.container__content {
height: 100px;
width: 600px;
background-color: red;
}

<div class="container">
<div class="container__actions">
<button>
must be visible all time
</button>
<button>
must be visible all time
</button>
</div>
<div class="container__content">
<br> scroll this
</div>
</div>

Answer 2

您可以使用粘性

<div style=" height: 100px; width: 400px; background-color: yellow; overflow: auto">
<button style="position: sticky ; top: 0">
must be visible all time
</button>
<button style="position: sticky; top: 0;">
must be visible all time
</button>
<div style="height: 100px; width: 600px; background-color: red">
<br>
scroll this
</div>
</div>