HTML相对链接链接到导航栏覆盖的锚点

Question

当我在HTML中创建相对链接时，<a href="workshops.html#bot" class="btn btn-primary">Bot Workshops</a>可以正确链接，但是将锚点放置在页面顶部，并由导航栏覆盖。有没有办法降低它，使锚点位于导航栏下面？

Answer 1

如果我对它的理解正确，那么当用户单击<a href="workshops.html#bot" class="btn btn-primary">Bot Workshops</a>时，它应该位于导航栏的下方。

在导航栏中，添加一个ID。例如：

<div id="bot"></div>

Answer 2

也许您需要更改锚链接的显示。

svg:hover ~ #overlay {
  transition: opacity .7s ease-in;
  opacity: 1;
}

Answer 3

您应该在#bot div中添加padding-top（大约是导航栏的高度加上一些空间）。 （这是基于以下一些假设）

我认为您的导航栏是固定的吗？

如果是这种情况，则#bot锚点div的顶部将位于浏览器视口的顶部。但是导航栏将混淆下面的某些内容。

这更多是css /样式问题。

如果您确实添加了padding-top，则可能还需要确保该值具有响应性。