html - css:元素在固定位置并且仍然在流动中？

Question

我在一个 div 中有一些按钮，它有 overflow:auto，意味着 div 是可滚动的，并且具有固定的高度。我希望顶部的按钮位于固定位置，这意味着即使滚动 div，它们也始终可见。
我已经尝试了一些测试，为按钮设置固定位置使它们重叠，但我不希望这样，我希望它们在文档流中。我可以对按钮执行 position:fixed 并在同一个 div 中的其他元素之间放置一些间距，但是如果窗口本身滚动，那将不起作用，按钮将变得不合适。

jsfiddle

Answer 1

<div id='txt-div' style='margin-top:30px;'>text</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>