Html 具有响应导航和div的固定位置，为什么重叠？

我正试图通过固定导航使其响应。如果主栏不与导航栏重叠，我如何才能做到这一点？我希望这两列齐平并随屏幕调整大小。导航需要保持在那里，因为我在一页上垂直添加了几个“页面”。我觉得这应该是显而易见的，但我已经挣扎了一段时间，我已经阅读了几乎所有最近的答案，尝试了很多东西，但没有任何东西对我有效

html，
身体{
高度：100vh；
宽度：100vw；
弹性：1；
溢出：自动；
}
.导航{
背景色：#e5b032；
证明内容：之间的空间；
对齐项目：居中；
高度：100vh；
位置：固定；
排名：0；
左：0；
}
.导航a{
颜色：#000；
保证金：3雷姆1雷姆；
}
.导航a:悬停{
背景色：#41dbb8；
}
.家{
背景色：#fb7592；
弯曲方向：立柱；
位置：相对位置；
最大宽度：100%；
高度：100vh；
对齐内容：居中对齐；
文本对齐：居中；
溢出：隐藏；
填充：0；
}

家
这就是内容。

有必要吗？左侧边栏现在固定为

位置粘性

和

顶部0

html，
身体{
/*高度：100vh；
宽度：100vw；
弹性：1；
溢出：自动*/
填充：0；
保证金：0；
框大小：边框框；
}
.行{
显示器：flex；
宽度：100%；
}
.col-md-3.d-flex{
背景色：#e5b032；
证明内容：之间的空间；
对齐项目：居中；
高度：100vh；
位置：粘性；
排名：0；
}
/*.导航{
背景色：#e5b032；
证明内容：之间的空间；
对齐项目：居中；
高度：100vh；
位置：固定；
排名：0；
左：0；
}*/
.导航a{
颜色：#000；
保证金：3雷姆1雷姆；
}
.导航a:悬停{
背景色：#41dbb8；
}
.nav.nav-pills.flex-column{
显示器：flex；
}
.家{
背景色：#fb7592；
弯曲方向：立柱；
/*位置：相对位置*/
/*最大宽度：100%*/
宽度：100%；
/*高度：100vh*/
高度：150vh；
对齐内容：居中对齐；
文本对齐：居中；
溢出：隐藏；
填充：0；
}

这就是内容。

这将是结构

...
这就是内容。

移除

位置：固定用于
.nav
类

添加
溢出：自动至
主要内容
以使其可滚动。
同时给
左侧导航提供一些
宽度


html，
身体{
高度：100vh；
宽度：100vw；
弹性：1；
溢出：自动；
}
.导航{
背景色：#e5b032；
证明内容：之间的空间；
对齐项目：居中；
高度：100vh；
宽度：200px；
排名：0；
左：0；
}
.导航a{
颜色：#000；
保证金：3雷姆1雷姆；
}
.导航a:悬停{
背景色：#41dbb8；
}
.家{
背景色：#fb7592；
弯曲方向：立柱；
位置：相对位置；
最大宽度：100%；
高度：100vh；
对齐内容：居中对齐；
文本对齐：居中；
溢出：自动；
填充：0；
}
.行{
显示器：flex；
}

这就是内容。
这就是内容。
这就是内容。
这就是内容。
这就是内容。
你能做一个你想要的油漆的粗略模型，并把它添加到你的问题中吗？非常感谢你的时间。不幸的是，这不起作用。我得到了同样的结果。是的，我做了更改，然后我担心我错过了一些东西，所以我注释了我自己的css，并完全复制了你放的内容。它仍然是重叠的，home div不会与代码段中的side-nav.add引导脚本保持一致。确保没有
position:fixed
。好的，我更新了上面的HTML以显示完整的HTML页面。这就是我所拥有的一切，因为我刚刚开始做这件事，并挂断了布局。我发现，有太多不需要的引导类。使用引导修复它变得越来越困难。唯一的建议是
row
，其他一些类有
flex-wrap:wrap它正在破坏css。同样在代码片段中，添加bootsrap脚本的cdn路径。我非常感谢您花时间回答。不幸的是，这不起作用。它使用150vh使视口倾斜，而sticky类不会使侧导航保持不变。当我缩小页面时，仍然有一些重叠。我的解决方案很有效，我将对此进行解释。。1.我将内容的高度设置为150vh，向您展示粘性边栏的工作原理；2.侧边栏粘性（黄色块）工作良好，粘性规则已建立；3.主内容（粉色块）是橡皮状的，如果缩小浏览器窗口，您将看到内容块中的文本保持居中，这意味着没有十字线。任务已根据说明中的要求完成。再一次，仔细阅读我的代码，并将我的代码仔细地转移到您的项目中。你会成功的：）