我使用 css 制作了一个“粘性 header ”，它始终显示在页面顶部，而其他内容则位于其下方。 在标题中我有一些内部链接。问题是，当单击链接时，页面会滚动，因此目标位于页面顶部 - 被我的粘性标题隐藏 - 而不是就在页面下方。
关于如何解决这个问题有什么建议吗？
CSS:
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3.5em;
padding:0;
margin: 0;
}
#container {
width: 100%;
margin: 3.5em 0 0 0;
padding: 0;
overflow:auto;
}
#content {
padding: 0 4em;
margin: 0;
}
html:
<body>
<div id="header">
<div id="content">
<p>
<a href="#xyz">XYZ</a>
</p>
</div> <!--end content-->
</div> <!--end header-->
<div id="container">
<div id="content">
<p>A lot of text.</p>
<a name="xyz"></a>
<p>A lot of text</p>
</div><!--end content-->
</div><!--end container-->
</body>
最佳答案
首先，最好使用带有 id 的 block 而不是 name — 这是更标准的方式。
然后，将类添加到 anchor ，然后使其具有绝对位置 + 将其移动到负顶部 margin 等于标题的高度。
看看这个 fiddle :http://jsfiddle.net/kizu/gfXJJ/
或者，对于支持伪元素的浏览器，您可以添加一个具有所需高度的元素，并通过负上边距补偿它的高度，这样它就相当于您要建立链接的 block 的开始.这样做您可以将 id 添加到已经存在的元素中，而不是创建额外的元素。
这是一个带有伪元素的版本:http://jsfiddle.net/kizu/gfXJJ/2/
或者您可以将顶部 padding 和负 margin 添加到本身具有 id 的元素:http://jsfiddle.net/kizu/gfXJJ/2/ — 但在那种情况下，背景可能会出现问题，因为 block 在顶部物理扩展。
关于css - 粘性标题和内部链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7717894/