Html CSS：在英雄图像上方制作浮动导航条的最佳方法？

以前可能有人以不同的方式问过这个问题，但我找不到任何具体的答案

我想有一个导航栏，在一个普通的页面上，它位于页面内容之上，在一个有英雄图像的页面上，它看起来像是在页面内容之内

我通常使用Jinja2模板（用于Django），因此手动将导航栏放入页面内容没有多大意义

我目前使用负边距来做这件事，但感觉有点不对劲（下面是结帐代码）

编辑：第二个导航栏（导航栏背景在英雄背景后面，但导航栏文本在英雄背景前面）是我想要的样子

*{
框大小：边框框；
保证金：0；
填充：0；
}
身体{
字体系列：Arial；
}
：根{
--初级：#21abde；
--导航条高度：50px；
}
navbar先生{
高度：var（--导航栏高度）；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
填充：10px；
背景：#333；
边框：1px纯灰；
颜色：白色；
}
纳瓦尔先生{
列表样式：无；
显示器：flex；
}
navbar ul a{
填充：10px；
颜色：白色；
文字装饰：无；
过渡：放松；
}
.导航栏ul a：悬停{
颜色：var（--初级）；
}
.内容，
.英雄{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.内容{
背景：darkcyan；
高度：计算（100vh-var（--导航条高度））；
}
.英雄{
背景：darkorange；
边距顶部：计算（-1*var（-navbar高度））；
高度：100vh；
}

导航栏1





内容
导航栏2





英雄

你说得对。有更好的办法。就用吧

*{
框大小：边框框；
保证金：0；
填充：0；
}
身体{
字体系列：Arial；
}
：根{
--初级：#21abde；
}
navbar先生{
高度：50px；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
填充：10px；
背景：#333；
边框：1px纯灰；
颜色：白色；
位置：固定；
宽度：100%；
}
纳瓦尔先生{
列表样式：无；
显示器：flex；
}
navbar ul a{
填充：10px；
颜色：白色；
文字装饰：无；
过渡：放松；
}
.导航栏ul a：悬停{
颜色：var（--初级）；
}
.内容，
.英雄{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.内容{
背景：darkcyan；
高度：100vh；
}
.英雄{
背景：darkorange；
高度：100vh；
}

导航栏1





内容
导航栏2





英雄

实际上这不是我想要的。在我的代码中有2个导航栏，第二个导航栏中，英雄背景位于导航栏背景的前面，但导航栏文本的后面是我想要的。