Html 具有固定导航和粘性标题的锚

正如您在中所看到的，每个div都有一个导航栏和一个粘性标题。现在，如果单击我的锚，我会向下滚动到正确的位置，但是标题与div的文本重叠

我希望标题在向下滚动时位于div上方，这可以通过设置

.header { 
    margin-bottom: 40px;
}

如果我这样做，我会得到一个偏移量，这是我根本不想要的，你可以在这里看到：

有没有办法避免重叠和无余量？ 提前谢谢你

我已经尝试过将padding top添加到锚点来抵消它，如中所建议的，但这也不起作用，仍然重叠

检查此片段：

navbar先生{ 位置：固定； 高度：40px； 背景：绿色； 排名：0； 宽度：100%； z指数：5； } .导航座{ 位置：绝对位置； 顶部：40px； } .内容{ 边缘顶部：60像素； } .1、.2、.3{ 高度：1000px； 填充顶部：40px； } .标题{ 位置：粘性； 顶部：40px； 背景：白色； } 导航栏 标题一 Lorem ipsum dolor sit amet，是一位杰出的献身者。无需购买汽水。这是我的外耳道。修女身份证，权杖。马塞纳斯·维尔·阿利夸姆。Suspendisse调味品，包括amet rhoncus suscipit、leo justo maximus urna、欧盟孕妇libero nisi。整瓶发酵液只需一杯，一杯一杯。奥奇·内克（orci neque）的效率，在。 Lorem ipsum dolor sit amet，是一位杰出的献身者。无需购买汽水。这是我的外耳道。修女身份证，权杖。马塞纳斯·维尔·阿利夸姆。Suspendisse调味品，包括amet rhoncus suscipit、leo justo maximus urna、欧盟孕妇libero nisi。整瓶发酵液只需一杯，一杯一杯。奥奇·内克（orci neque）的效率，在。 Lorem ipsum dolor sit amet，是一位杰出的献身者。无需购买汽水。这是我的外耳道。修女身份证，权杖。马塞纳斯·维尔·阿利夸姆。Suspendisse调味品，包括amet rhoncus suscipit、leo justo maximus urna、欧盟孕妇libero nisi。整瓶发酵液只需一杯，一杯一杯。奥奇·内克（orci neque）的效率，在。 Lorem ipsum dolor sit amet，是一位杰出的献身者。无需购买汽水。这是我的外耳道。修女身份证，权杖。马塞纳斯·维尔·阿利夸姆。Suspendisse调味品，包括amet rhoncus suscipit、leo justo maximus urna、欧盟孕妇libero nisi。整瓶发酵液只需一杯，一杯一杯。奥奇·内克（orci neque）的效率，在。 Lorem ipsum dolor sit amet，是一位杰出的献身者。无需购买汽水。这是我的外耳道。修女身份证，权杖。马塞纳斯·维尔·阿利夸姆。Suspendisse调味品，包括amet rhoncus suscipit、leo justo maximus urna、欧盟孕妇libero nisi。整瓶发酵液只需一杯，一杯一杯。奥奇·内克（orci neque）的效率，在。 标题二 Lorem ipsum dolor sit amet，是一位杰出的献身者。无需购买汽水。这是我的外耳道。修女身份证，权杖。马塞纳斯·维尔·阿利夸姆。Suspendisse调味品，包括amet rhoncus suscipit、leo justo maximus urna、欧盟孕妇libero nisi。整瓶发酵液只需一杯，一杯一杯。奥奇·内克（orci neque）的效率，在。 头球三 Lorem ipsum dolor sit amet，是一位杰出的献身者。无需购买汽水。这是我的外耳道。修女身份证，权杖。马塞纳斯·维尔·阿利夸姆。Suspendisse调味品，包括amet rhoncus suscipit、leo justo maximus urna、欧盟孕妇libero nisi。整瓶发酵液只需一杯，一杯一杯。奥奇·内克（orci neque）的效率，在。

---

谢谢你的回答！不幸的是，这并不能解决类1、2和3的头和div之间的空间问题