html - 固定菜单覆盖元素的开始

Question

我在屏幕顶部固定了 DIV 元素，当我单击元素上的菜单以滚动到某个 DIV 时，DIV 滚动但由于固定元素而与文本开头重叠。

代码是:

<div class="fix">Fixed element</div>
<a href="#element">Link to elemnt's ID</a>

<div id="element">
Begin of the text is here<br>

SOME text
</div>

这是问题的关键http://jsfiddle.net/dr6rw/

Answer 1

那是因为页面滚动到框的顶部。您可以使用 padding-top 将盒子的内容向下推。或 border-top属性如下:

EXAMPLE HERE

#element {
    height:500px;
    width:400px;

    margin-top:180px;             /* 180px + 20px = 200px */
    border-top: 20px solid white; /* Use a 20px white top border */

    background:red;
}