Django模板中HTML内容覆盖导航栏（navbar）问题求助

问题根源是：你给导航栏设置了position: fixed，这个属性会让元素脱离正常文档流，不再占据页面空间，所以后续的内容会从页面顶部开始渲染，最终和导航栏重叠。

下面是两种直接有效的解决方式：

方法一：给body添加顶部内边距 #

在CSS的body样式中添加padding-top，值匹配导航栏的高度（根据你的样式，设置80px即可适配）：

body {
    min-height: 100vh;
    background: var(--bg-color);
    color: var(--text-color);
    padding-top: 80px; /* 添加这行代码 */
}

方法二：给内容容器添加顶部外边距 #

1. 修改基础模板，给内容块套一个容器：

{% include 'navbar.html'%}

<div class="content-container">
    {% block content %}
    {% endblock %}
</div>

2. 在CSS中添加容器样式：

.content-container {
    margin-top: 80px;
    padding: 0 12%; /* 可选，和导航栏的左右padding保持一致，让内容对齐 */
}

内容的提问来源于stack exchange，提问作者Sam