Html 当给定一个命名锚（#注释）时，使页面跳转到比实际锚低30px

这在不使用jQuery或javascript的情况下是可能的吗？我尝试相对定位锚定标记，然后使用top:-30px，但这似乎并不重要。页面总是跳转到锚标记呈现的位置，而不是CSS移动它的位置。有什么建议吗

解决方案：

---

将链接放在目标元素的内部。在父元素（位置：相对）中，在命名的锚点上（位置：绝对；顶部：-30px）。工作起来很有魅力。

您不能在包含锚链接id的元素顶部添加一些填充吗？ 我刚试过，它似乎很管用

css:

html:

标题
废话

你就不能用一些简单的东西，比如：

    ul > li > a {
        position: relative;
        top: -30px;
    }

这将使你的锚显示30像素以上，而不改变你的布局的其余部分

---

我添加这些数字只是为了让你能看到它在做什么，当然可能需要一点尝试和错误，但它应该能达到我想象的效果。

可能是真实的例子更好我希望我能，但这是在沙箱环境中进行的。想象一下这个代码：

诸如此类
诸如此类
诸如此类。每个列表项都设置了样式，因此它们正好位于彼此的顶部。我需要一种方法让评论2跳到正确的位置，在页面上只高出30像素。我可以，但这完全破坏了设计。所有内容都相互对接，没有额外的填充或边距空间。这可能是一个糟糕的解决方案，但您可以将id=“here”放在实际/原始元素之上的某个元素上。考虑一下。。。不可行。我不明白你的例子…在彼此之上和30px更高？从您的示例代码中，注释#2是唯一高出30像素的吗？或者你想在点击锚定链接时让它弹出？不，comment2只是一个例子。所有三个都需要跳转到指定的锚点位置，但要高出30px。我算出了答案，并用答案编辑了问题。
<ul>
  <li><a href="#here">Here</a></li>
</ul>

<h2 id="here">Title</h2>
<p>blah blah</p>

    ul > li > a {
        position: relative;
        top: -30px;
    }