Html css：元素处于固定位置，但仍在流中？

我有一些按钮在一个div有溢出：自动，这意味着，该div是可滚动的，并有固定的高度。我希望顶部的按钮处于固定位置，这意味着即使在滚动div时，它们也始终可见。
我试过一些测试，设置按钮的固定位置使它们重叠，我不希望这样，我希望它们出现在文档流中。我可以对按钮执行

position:fixed

，并在同一个div中的其他元素之间放置一些间距，但如果窗口本身被滚动，则这将不起作用，按钮将变得不合适

文本

当你滚动它时，它最终会重叠，试着用按钮div播放，添加一个白色背景，这样你就看不到重叠了

以下是完整的代码：

<div style='height:100px; overflow:auto;'>
<div id='button-div' style='position:fixed;background-color:#ffffff;'>
<button>can I be at fixed position, and still not overlap?</button>
</div>
<div id='txt-div' style='margin-top:30px;'>2323</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>2323</div>
</div>

我可以在固定的位置，但仍然不重叠吗？
2323
文本
文本
文本
文本
文本
文本
文本
2323

尝试将给定样式添加到第一个div.{code}文本{code}

<div style='height:100px; overflow:auto;'>
<div id='button-div' style='position:fixed;background-color:#ffffff;'>
<button>can I be at fixed position, and still not overlap?</button>
</div>
<div id='txt-div' style='margin-top:30px;'>2323</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>2323</div>
</div>