我有一个停留在与带我去不同的部分进一步下跌的网页链接上我的网站上一个固定的导航栏。 但是，因为我的固定的导航栏具有40像素的高度，开始每个部分的40像素的掩盖。 我将如何弥补在我的链接使用HTML或CSS把我由40像素？ 谢谢。
Answer 1:
你可以试试绝对定位“虚拟”锚40个像素以上各部分的顶部。 你可以给他们零宽度/高度和隐藏的可见性，以确保这些锚不会影响你的网页的显示方式。 当用户点击了固定的导航栏中的链接之一，窗口将滚动到虚拟锚，其实际部分的开头40个像素以上的顶部。
例如HTML：
<div class="navbar">
<a href="#anchor1">Anchor 1</a>
<a href="#anchor2">Anchor 2</a>
<a href="#anchor3">Anchor 3</a>
</div>
<div class="section">
<span id="anchor1" class="anchor"></span>
Section Content
</div>
<div class="section">
<span id="anchor2" class="anchor"></span>
Section Content
</div>
<div class="section">
<span id="anchor3" class="anchor"></span>
Section Content
</div>
例如CSS：
body {
padding-top: 40px;
}
.navbar {
position: fixed;
width: 100%;
height: 40px;
top: 0;
left: 0;
z-index: 10;
border-bottom: 1px solid #ccc;
background: #eee;
}
.section {
position: relative;
}
.anchor {
display: block;
position: absolute;
width: 0;
height: 0;
z-index: -1;
top: -40px;
left: 0;
visibility: hidden;
}
有关工作示例，请参阅http://jsfiddle.net/HV7QL/
编辑：CSS3还包括:target伪类，它适用于一个元件，其id已被引用的href的文档中的链接，或URL的哈希值的。 可以应用一个40像素填充到顶部:target将被仅仅施加到使用者从固定导航栏选择部。
例如CSS：
.section:target {
padding-top: 40px;
}
这是语义上比上述方法更清洁，但不会老的浏览器上工作。
工作示例： http://jsfiddle.net/5Ngft/
Answer 2:
我刚好碰到这个问题我自己，所以今天我就一直在想这件事了一下已经跌倒，但我想我只是找到了一个解决方案：
添加padding-top: 40px; margin-top: -40px padding-top: 40px; margin-top: -40px到要跳转到的元素。 负利润率取消填充，但是浏览器仍然认为该元素的顶部40像素高于它实际上是（因为实际上它是，只有它的含量开始降低）。
不幸的是，这可能已设置边距和补碰撞，如果您使用的是有针对性的元素在背景上它会搞砸了这一切。
我会看看我是否能解决这一点，发布的jsfiddle，但在此期间这里有一个基本的答案至少:)
编辑 ：我想我有后台解决方案，但没有奏效。 再次去除。
最后编辑 ：如果你知道缠绕元件的背景颜色它样的工作。 在我的例子，我知道该文本是在白色背景上，但标题有银色背景。 为了防止标题不必在我们设置的微胖的背景下，而不是我把它放在一个伪元素面前：
#three:before {
content: " ";
background: white;
display: block;
margin-top: -40px;
padding-top: 40px;
}
这样，微胖再有一个白色的背景，但如果你已经知道它需要什么背景这仅适用。 将其设置为透明的，例如将不显示的文章标题本身的基本背景。
的jsfiddle： http://jsfiddle.net/Lzve6/标题一个是你有问题的默认值。 标题二是我的第一个解决方案，保证工作在几乎所有的浏览器标题三是使用:before伪元素，可能无法工作在旧的浏览器 。
文章来源: How do I offset where my fixed nav bar takes me?
