HTML导航。使用CSS重叠内容定位

我正在尝试创建一个导航链接，单击该链接将跳转到页面上的指定部分

问题是，当导航链接被点击时（比如第1天），它会像预期的那样跳到第1天部分，但会掩盖一些内容

我想要达到的是

页面应跳转到所需的部分

内容（即第0天（日期）应位于导航栏下，导航栏和内容框类元素之间有一点空间，如（我已尝试设置边距顶部，但没有解决问题）

NB：我的代码没有安排好（样式）

我的代码：

---

TIA。

这是我的解决方案的一个例子。检查JS，我添加了“count\u to\u scroll\u up”变量来更改像素的计数，这将有助于不覆盖部分内容

//获取元素并输出上次修改的日期
让lastModDate=document.lastModified；
让lastModOut=document.getElementById（“lastMod”）.innerHTML=“页面上次更新日期：”+lastModDate；
$（函数（）{
var count\u to\u scroll\u up=75；
$（“#粘性导航a”）。在（'click'，函数（e）上{
e、 预防默认值（）；
var current_id=$（this.attr（'href'）；
console.log（当前_id）；
$（[document.documentElement，document.body]）。动画({
scrollTop:$（当前id）.offset（）.top-计数\u到\u向上滚动\u
}, 2000);
})
});

#简介{
最小高度：100px；
背景色：天蓝色；
填充：20px；
显示：块；
文本对齐：对齐；
}
h1{
边际上限：0px；
文本转换：大写；
文本对齐：居中；
颜色：番茄；
字体大小：粗体；
}
#粘性导航{
最小高度：20px；
宽度：100%；
显示：块；
边框底部：5px实心番茄；
位置：粘性；顶部：0px；
z指数：99999；
背景色：天蓝色；
溢出：自动；
空白：nowrap；
}
#粘性导航>a{
显示：内联块；
字体大小：粗体；
文字装饰：无；
文本转换：大写；
边际：0px；
填充：12px 25px；
颜色：番茄；
字体大小：粗体；
左边框：1个实心番茄；
字号：18px；
}
#粘性导航>a:悬停{
背景色：番茄；
颜色：天蓝色；
字体大小：粗体；
字体大小：20px；
}
#包装纸{
填充：15px；
最小高度：100px；
宽度：95%；
保证金：0自动；
背景颜色：浅蓝色；
}
字段集{
边框：2件纯黑；
保证金：60px自动25px自动；
填充：10px 20px；
}
传奇{
颜色：淡蓝色；
字体大小：粗体；
}
.内容框{
边框：2倍纯色灰色；
保证金：10px自动25px自动；
盒影：2PX2PX8PX0PX灰色；
}
.rem框{
边框：2个虚线道奇蓝；
}
.内容主管{
底边：2个实心番茄；
背景色：天蓝色；
宽度：100%；
颜色：番茄；
填充：5px0px；
字体大小：粗体；
}
氢{
保证金：0；
文本对齐：居中；
}
.内容正文{
背景色：淡蓝色；
最小高度：100px；
宽度：100%；
颜色：白色；
填充物：5px10px；
文本对齐：左对齐；
}
.content body>ul、.content body>li{
保证金：0；
边框：0px实心红色；
填充：0px；
}
.content body>ul{
填充物：5px 5px 5px 15px；
}
李{
边缘底部：8px；
}
.rem框h2{
颜色：淡蓝色；
}
.rem箱分区{
颜色：绿色；
背景色：透明；
}
人力资源{
边框：2个实心道奇蓝；
}
#ftop{
背景颜色：浅灰色；
最小高度：60px；
背景色：#ccc；
填充：20px；
宽度：100%；
文本对齐：居中；
}
#ftop h3{
颜色：淡蓝色；
字体大小：25px；
边际上限：0；
文本转换：大写；
}
#ftop hr{
边框：2个实心番茄；
}
#ftop a{
文字装饰：无；
颜色：灰色；
显示：内联块；
字体大小：粗体；
边框：0px实心红色；
保证金：0自动；
填充：10px；
}
#ftop a：悬停{
颜色：淡蓝色；
边框底部：2倍纯色道奇蓝；
}
页脚{
文本对齐：居中；
背景色：淡蓝色；
最小高度：40px；
填充：30px 20px；
颜色：白色；
字体：斜体；
}
小的{
字体系列：单字；
}
.社会btn{
显示：内联块；
右边距：5px；
}
#ftop a.whatsapp:悬停{
颜色：绿色；
底部边框：2倍纯绿；
}
#电子邮件：悬停{
颜色：番茄；
底边：2个实心番茄；
}
#ftop a.twitter：悬停{
颜色：#00BCFF；
底部边框：2件纯色天蓝色；
}

简单编码进度跟踪器
嗨，谢谢你今天过来

我是金斯利·威廉（社交网络上的@KeleosWilliam），一位技术爱好者，渴望成为一名专业的网络和移动应用程序开发人员

为了让自己保持积极性并致力于继续学习，我创建了这个简单的页面，以帮助我每天跟踪和监控我的编码进度，即使在我开始“100天代码挑战”时也是如此

我将在格林尼治时间23:30至01:30（格林尼治时间+1）之间尽最大努力更新此页面

第0天（2020年4月4日）
我学到的