我们常使用页面内部连接以跳转到页面的某个位置，但当使用了fixed的头部时会遇到问题（跳转到指定位置的时候最上方被fixed的头部盖住）。有些技巧可以解决，用一些CSS的方法在视口的顶部和目标元素之间插入空白。
Demo网址：Jump links and viewport positioning
浏览器支持：因使用的方法而异
这个实验源于Chris Coyier在Forrst上一篇帖子，Chris的方法是为目标元素插入一个空的span，把id挪到span上，然后给span设定绝对定位并放到父元素之前。
这种方法有效，但是它需要修改HTML。Chris帖子的回复中有建立使用伪元素，或者是padding（内边距）。这个实验扩展并且结合了那些建议，展示了每种方法的局限性并记录它们的浏览器支持情况。
简单的方法
如果你要用简单的方式跳转到一个元素，那么使用 :before 伪元素是一个快速且简单的方法。
#target:before {
content:"";
display:block;
height:50px;
margin:-30px 0 0;
}这种方法的缺点是它要求浏览器支持伪元素，而且如果目录元素有背景色、重复的背景图、padding-top（上边距），或是border-top（上边框）有样式设定时，这种方法将不完美。
更健壮的方法
更健壮的方法是使用透明边框、负的外边距以及background-clip属性。若需要显示上边框，那么可以效仿使用伪元素，如同CSS 2.1中描述的多重背景和边框。
#target {
position:relative;
border-top:52px solid transparent;
margin:-30px 0 0;
-webkit-background-clip:padding-box;
-moz-background-clip:padding;
background-clip:padding-box;
}
#target:before {
content:"";
position:absolute;
top:-2px;
left:0;
right:0;
border-top:2px solid #ccc;
}这种方法仍然有缺点：如果目标元素有背景色、渐变、重复的背景图设定时，它要求浏览器支持background-clip属性。如果需要显示上边框，它要求浏览器支持伪元素和它们的定位。而且它会干扰标准的外边距的使用。
要看看这些方法执行的情况—-更多细节上的代码、浏览器支持情况和缺点，可以看一下Demo页面，如果你知道更好的实现技术，请让我知道。
原文：http://nicolasgallagher.com/jump-links-and-viewport-positioning/