Jquery 叠加不'；不要遮住导航栏

通过将内容类边距top设置为10 rem，我将导航栏和内容部分隔开，因为当我单击打开图标时，该设置使覆盖层不覆盖top 10 rem区域。谁能帮我一下吗？下面是我的代码

---

$（文档）.ready（函数（）{
$（“#openNav”）。单击（函数（）{
$（“#mySidenav”）.css({
“宽度”：“20%”
});
$（“.overlay”）.css({
'位置'：'固定'，
“显示”：“块”，
“背景色”：“rgba（0,0,0,0.5）”，
“z索引”：“2”，
“高度”：“100%”，
“宽度”：“100%”
});
});
$（“.closebtn”）。单击（函数（）{
$（“#mySidenav”）.css({
“宽度”：“0”
});
$（“.overlay”）.css({
“显示”：“无”，
“背景色”：“rgba（0,0,0,0）”
});
});
});
正文{
字体系列：“Lato”，无衬线；
/*背景色：rgba（0,0,0,0.5）*/
}
.覆盖{
显示：无；
身高：100%；
宽度：100%；
}
.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：2；
排名：0；
左：0；
背景色：白色；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
边框样式：实心；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.侧导航a:悬停{
颜色：#f1f1；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
.navbarTest4{
宽度：100%；
文本对齐：右对齐；
背景色：白色；
高度：100px；
边框样式：实心；
位置：固定；
排名：0；
}
.内容{
保证金上限：10雷姆；
边框样式：实心；
宽度：100%；
}

☰ 打开
一些文字一些文字一些文字一些文字

一些文字一些文字一些文字一些文字

一些文字一些文字一些文字一些文字

一些文字一些文字一些文字一些文字

一些文字一些文字一些文字一些文字

一些文字一些文字一些文字一些文字

一些文字一些文字一些文字一些文字

一些文字一些文字一些文字一些文字

您可以将
top:0
添加到覆盖类中。
这将使叠加div从窗口的最顶端开始。
可能
位置：绝对；排名：0到
。覆盖
？