Html 在导航栏上滚动的Flexbox元素

我正在慢慢地学习CSS和HTML，到目前为止，我一直在制作一个页面，上面有一个导航栏，下面有一个元素列表。上述列表中的元素也会改变其形状，但这不是我问题的目的。 我遇到的问题是，在滚动时，容器类元素只是在导航栏的顶部滚动，这使得它有点毫无意义

标题{
位置：固定；
显示器：flex；
左：0；
右：0；
排名：0；
保证金：0；
背景：红色；
}
主要{
保证金：0自动；
填充顶部：80px；
背景：黄色；
}
.集装箱{
利润率：10px；
显示器：flex；
边框：1px实心#aaa；
高度：200px；
最小宽度：700px；
柔性生长：1；
位置：相对位置；
}
.container div.containerinfo{
显示器：flex；
柔性包装：包装；
弹性系数：0.75；
弯曲方向：立柱；
背景色：白色；
}

导航栏

因为您的

标题在源代码中排在第一位，所以黄色的
div
元素将在其上方的z轴上分层

有两个选项可使标题显示在顶部：

将
z-index:1
添加到
标题
。这会将
标题
移动到其他元素的顶部，而不会有更高的
z索引
值。（所有元素的默认值为
auto
）

将
标题
元素放在源代码的最后

您需要添加z索引：1；到你的头css。z索引将确定页面上元素的“堆叠”。索引越高，它在页面上的堆栈就越高
 添加z索引，下面是原因-->