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

Question

这可以不使用jQuery或javascript吗？我试图相对定位锚标签，然后使用top：-30px，但这似乎并不重要。页面总是跳转到渲染锚标记的位置，而不是CSS移动它的位置。有什么建议吗？

解决方案：

将链接放在您要定位的元素中。在父元素（position：relative）中，在命名锚点上（position：absolute; top：-30px）。像魅力一样。

Answer 1

难道你不能只在包含锚链接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>

Answer 2

难道你不能只使用简单的东西：

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

这将使你的锚点显示在30px以上，而不会改变你的布局的其余部分。 jsFiddle example

我已经添加了这些数字，以便你可以看到它正在做什么，当然可能需要一些试验和错误，但它应该做我想象的技巧。