使用Django开发网站时侧边导航栏遮挡页面文本该如何排查？

• CSS中定义的.main类左外边距未生效：你设置了.main {margin-left: 160px;}用来规避侧边栏遮挡，但页面内容区域没有使用main类，该样式完全没有作用到内容上
• 侧边栏固定定位脱离文档流：你给.sidenav设置了position: fixed属性，该属性会让元素脱离正常文档流悬浮在页面上层，即便移除宽度配置，侧边栏也会根据内部导航内容自动撑开宽度，依然会覆盖下方正常文档流中的内容
• HTML语法错误：<div id="content", name="content">中两个属性之间多写了多余的逗号，不符合HTML属性书写规范

1. 补充侧边栏宽度配置，和内容区外边距对齐 #

给.sidenav增加明确的宽度属性，避免宽度自动适配出现偏差，修改后的CSS代码如下：

.sidenav {
    height: 100%;
    position: fixed;
    z-index: 1; 
    top: 0;
    left: 0;
    width: 160px; /* 新增明确宽度，和内容区margin-left对应 */
    background-color: #111; 
    overflow-x: hidden; 
    padding-top: 20px; 
}

2. 调整页面结构，绑定内容区样式 #

将Django的内容块放入带main类的容器中，同时修正HTML语法错误，修改后的body部分代码如下：

<body>
    <div class="sidenav">
        <a href="/home">Home</a> 
        <a href="/create">Create</a>
        <a href="/6">View</a>
    </div>

    <div class="main">
        <div id="content" name="content">
            {% block content %}
            {% endblock %}
        </div>
    </div>
</body>

修改完成后重启服务即可解决内容被遮挡的问题。

内容的提问来源于stack exchange，提问作者Alex is funny