Html Posifion仅固定一盒flex

我有几个这样的专栏

<div style="display: flex;flex-direction:column">
<main class="main-contents" role="main">TopHeader </main>
<div> content A</div>
<div> content B</div>
<div> content C</div>
<div> content D</div>
</div>

上头
内容A
内容B
内容C
内容D

我想将

main

粘贴到页面顶部（如youtube播放器），并使内容A~D可滚动

有什么好办法可以做到这一点吗

恐怕使用flex不适合这个目的

---

然而，我正在制作响应性网络，所以我希望使用尽可能相同的方式。

给你……

。主要内容{
职位：-网络工具包粘性；
位置：粘性；
排名：0；
背景色：白色；
}
div{
高度：1500px；
背景颜色：灰色；
}

文件
上头
内容A
内容B
内容C
内容D

是否要创建一个类似于

stackoverflow

的导航栏，它在滚动页面内容上保持不变？