html - 当给定一个命名 anchor (#comments)时，使页面跳转到比实际 anchor 低 30px

Question

不使用 jQuery 或 javascript 是否可行？我尝试过相对定位 anchor 标签，然后使用top:-30px，但这似乎无关紧要。页面总是跳转到呈现 anchor 标记的位置，而不是 CSS 移动它的位置。有什么建议吗？

解决方法:

将链接放在您定位的元素中。在父元素 (position:relative) 中，在命名 anchor (position:absolute; top:-30px) 上。就像一个魅力。

Answer 1

您不能在包含 anchor 链接 ID 的元素顶部放置一些填充吗？我刚刚尝试过，它似乎有效。

CSS:

h2 {padding-top:50px;}

html:

<ul>
  <li><a href="#here">Here</a></li>
</ul>

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