带有链接的固定元素被 div 与其中的文本重叠

Question

所以我开始构建我的第一个 'real' 网站，但很快我运行就遇到了问题。网站顶部的 fixed 导航栏被 <div> 或 <p> 标签重叠，（它们的 z-index 都低于重叠的元素. fixed 元素不会视觉重叠，但是当它在其他元素前面时你不能点击链接。我不知道如何修复它，在Google 上没有找到解决方案。

示例代码如下：

<body>
<div id="Nav"> <a href="http://brochmann.se/"><p id="navicon">Brochmann.se</p></a>
 <a id="navtext1" href="#">link</a>
 <a id="navtext1" href="#">another link</a>

    </div>
    <div id="text">
        <p>This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.
            This is a test text i just made for a problem i have.</p>
    </div>
</body>

</html>

CSS:

p {
    font-family: Noto Sans;
    position:relative;
    z-index: -2;
    margin-left: 8px;
}

a {
    text-decoration:none;
}

#headtxt {
    /*titeltext*/
    position: relative;
    color: #F0F4C3;
    text-align: center;
    top: -300px;
    font-family:Lobster;
    font-size: 700%;
    opacity: 1;
    z-index: 1000
}

body {
    margin: 0px;
}

#Pic {
    z-index: 1;
    height: 300px;
    /* avstånd från headern till övrigt innehåll *magisk punkt* */
    z-index: 999;
    background-color: #E6EE9C
}

#Nav {
    /* fäst navbar i toppen av fönstret*/
    position: fixed;
    /*background-image: url("head.JPG");*/
    /*samma bild som i headern*/
    background-color: #F0F4C3;
    width: 100%;
    background-size: 100%;
    background-position: center right;
    background-repeat: no-repeat;
    top:0px;
    z-index: -1;
    box-shadow: -5px 10px 20px #888888;
    height:40px;
}

#headimg {
    /*bakgrundsbild till headern*/
    opacity: 1;
}

#navicon {
    color: #AFB42B;
    font-family: Lobster;
    margin-left: 10px;
    font-size: 150%;
    z-index: 5;
    position: relative;
    display: inline;
    top: 20%;
    text-align: left;
    opacity: 1;
}

#navicon:hover {
    color:white;
}

#text {
    /* brödtext*/
    position: relative;
    z-index: -5;
}

/*#navcontainer{
        background-color: #E6EE9C;
        width:13%;
        height: 100%;
        z-index: -2;
        margin-top: -34px;
        display: inline;
        position:relative;
        top: -12px;
      }*/

#navtext {
    position: relative;
    top: -400px;
    margin-left: 18.5%;
    /*borde vara 20, ingen aning om vad som är felet*/
    text-align: center!important;
    text-align: -moz-center;
    color: #F0F4C3;
    font-family: Oswald;
    font-weight: bolder;
    font-style: oblique;
    font-size: larger;
}

#navtext1 {
    margin-left: 18.5%;
    /*borde vara 20, ingen aning om vad som är felet*/
    text-align: center!important;
    text-align: -moz-center;
    font-family: Oswald;
    font-weight: bolder;
    font-style: oblique;
    font-size: larger;
    color: #AFB42B;
    position: relative;
    left: -11.75%;
    top: 25%;
    z-index: 4;
}

/* FF9800 - orange #CDDC39 - Lime */

JSFiddle

我不太擅长HTML，所以可能会很乱，但我简化了很多

Answer 1

您需要为文本添加边距：

#text {

/* brödtext*/

position: relative;
margin-top:50px;
z-index: -5;

}

Answer 2

导航栏位于所有内容的后面，因为您告诉它位于 #Nav 中带有 z-index:-1; 的内容后面。从您的 #Nav 中删除此行将解决此问题。

#Nav {
    position: fixed;
    background-color: #F0F4C3;
    width: 100%;
    background-size: 100%;
    background-position: center right;
    background-repeat: no-repeat;
    top: 0px;
    z-index: -1; /* <======= THIS LINE NEEDS TO BE REMOVED <======= */
    box-shadow: -5px 10px 20px #888888;
    height: 40px;
}

Jsfiddle example here

尽管我认为您误解了 z-index 的概念，因为我注意到您在许多类和 ID 中使用了 z-index。只在真正需要的时候使用它。

注： IDs should be created for unique divs as well, when used more than once you should exchange these for classes instead.

关于 z-index

z-index 属性确定 HTML 元素的堆栈级别。 “堆栈级别”指的是元素在 Z 轴上的位置（相对于 X 轴或 Y 轴）。较高的 z-index 值意味着元素将更接近堆叠顺序的顶部。此堆叠顺序垂直于显示器或视口。

http://www.websiterox.com/wp-content/uploads/2015/03/zindex.gif http://www.lakotuts.com/wp-content/uploads/2013/12/figure020.gif

带有链接的固定元素被 div 与其中的文本重叠

Fixed element with links in it gets overlapped by div with text in it

html

css

fixed

关于 z-index