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

【问题标题】：When given a named anchor (#comments), make the page jump to 30px lower than the actual anchor当给定一个命名锚（#comments）时，使页面跳转到比实际锚低 30px
【发布时间】：2011-11-01 04:27:34
【问题描述】：

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

解决办法：

将链接放在您要定位的元素内。在父元素（位置：相对）中，在命名锚点上（位置：绝对；顶部：-30px）。像魅力一样工作。

【问题讨论】：

可能是活的例子更好
我希望可以，但这是在沙盒环境中。想象一下这段代码：<ul><li><a name="comment1"></a>blah</li><li><a name="comment2"></a>blah</li><li><a name="comment3"></a>blah</li></ul>。每个列表项都有样式，因此它们正好在彼此之上。我需要一种方法让#comment2 跳转到正确的位置，在页面上仅高出 30 像素。

标签： html css anchor

【解决方案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>

【讨论】：

我可以，但这完全破坏了设计。一切都相互对接，没有额外的填充或边距空间。
这可能是一个糟糕的解决方案，但您可以将 id="here" 放在实际/原始元素上方的某个元素上。
想想……不可行。
我不明白你的例子......在彼此之上并高出 30 像素？从您的示例代码中，comment#2 是唯一高 30 像素的代码吗？还是您想在单击锚链接时使其弹出？
不，#comment2 只是一个例子。这三个都需要跳转到指定的锚点位置，但要高 30 像素。我想通了，并用解决方案编辑了问题。

【解决方案2】：

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

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

这将使您的锚点在上方显示 30 像素，而不会改变布局的其余部分。 jsFiddle example

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

【讨论】：