锚链接和边距
我目前正在构建一个网页，其中一些元素放置在靠近顶部边缘的固定位置。 所以每当我导航到锚时，那些被置于这些固定元素下。 我想知道是否有一些风格或其他方法，当导航到锚点时，这会发生一些额外的抵消/保证金？
示例源代码
<html>
<body>
<div style="position:fixed; top:0px; height:100px; background:white;">
This covers the top 100px of the screen.
</div>
<div style="position:absolute; top:0px;">
<div>
<a name="foo" id="foo"><h2>Foo</h2></a>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores e
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet.
</p>
</div>
<div>
<a name="bar" id="bar"><h2>Bar</h2></a>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.
</p>
</div>
</div>
</body>
</html>
假设这个HTML可以在http://example.com/foobar.html找到，可以链接到http://example.com/foobar.html/#bar - 浏览器将滚动到名为/ id“bar”的锚点。 但在这个例子中有一个100px高的固定元素，它会阻挡“Bar”内容的上半部分。 现在我希望有一些样式/选项告诉浏览器，不要将元素滚动到文档窗口的顶部，而是留下一定的“滚动边距”（在这种情况下，滚动边距大约为200px）。 这不是关于元素边距，因为这些影响布局。 但这不是关于布局，而是提示滚动行为。
为了获得一个跨浏览器/跨设备的解决方案，您的定位点在其页面上不占用任何空间的意义上是真正invisible的，因此重要的是您要如下设置定位标记的格式：
<a name="foo" class="top"></a>
我们使用了一个类，以便您可以一次对所有的锚定标签进行样式设置（假设固定div是您常规页面模板的一部分）...您可以将其设置为问题所在的ID。
并格式化您的CSS如下：
a.top {
position: relative;
top:-100px;
display: block;
height: 0;
width:0;
}
使用Position: relative允许您拉动正常页面流的锚点。
将top设置为等于固定元素高度的负值维度将会将您跳转到的内容推送到完整视图中。
除非锚点实际显示，否则Chrome等浏览器不会尊重这种定位。 将内容添加到锚点，例如 将强制显示锚，但在许多情况下会创建与<a>的行高一样大的垂直空间，因此最好将display设置为阻止，并将width和height为0。
这是我的解决方案：http://jsfiddle.net/ufewB/
HTML
<div id="container">
<div id="fixed">
Fixed position element
<a href="#foo" alt="foo">Jump to foo</a>
</div>
<div id="spacer"></div>
<a id="foo"></a><h2>Foo</h2>
<p>Lorem ipsum text</p>
<div id="spacer"></div>
</div>
CSS
#fixed {
position:fixed;
top:0;
left:0;
width:100%;
height:100px;
background-color:red;
}
#spacer { height:800px; }
* { margin:0px; padding:0px; }
#container { width:960px; margin:auto; }
#foo { position:relative; top:-100px; }
基本上，我给了<a id="foo"> </a> CSS position:relative; top:-100px position:relative; top:-100px ，我把所有包含在锚内的元素放在锚点旁边。 我这样做是因为你本质上创建了一个不可见的链接，将它从普通文档流中移除，并将其定位为比通常情况下高100px。
这样做，当页面将散列链接放置在页面的顶部时，链接旁边的任何内容将低100px。 另外，这样做的另一个好处是您不必乱调文档的流程; 您只需更改隐形锚标签的流程，这样可以更轻松地进行维护
链接地址: http://www.djcxy.com/p/62047.html