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;
}

Answer 2

Demo Fiddle

将z-index:1;添加到.fix

的CSS中

或如果您希望内容与固定div重叠，see this example

z-Index from MDN:

z-index CSS属性指定元素的z顺序及其顺序   后人。当元素重叠时，z顺序决定哪一个   涵盖了另一个。具有较大z指数的元素通常覆盖一个   较低的元素。

对于定位框，z-index属性指定：


当前堆叠上下文中框的堆栈级别。

框是否建立了本地堆叠上下文。

Answer 3

z-index属性是实现此目的的最佳方式，只需使用相对定位设置非固定div，并添加大于固定div的z-index的z-index

你的新css应该是这样的

body {height:1000px;}

.fix {
background:black;
color:white;
position:fixed;
top:0;
width:100%;
z-index:1;
}

a {
position:relative;
top:20px;
}

#element {
height:500px;
width:400px;
margin-top:200px;
background:red; 
z-index:2;      
position:relative; //Relative positioning
}

固定菜单重叠元素的开头

3 个答案:

Demo Fiddle