Question

所以我开始构建我的第一个“真正的”网站，很快我遇到了一个问题。网站顶部的fixed导航栏会被<div>或<p>标记重叠（两者都比重叠的元素z-index低<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>固定元素没有在视觉上重叠，但是当它位于其他元素前面时你无法点击链接。我不知道如何解决它，并且没有在Google上找到解决方案。

以下是示例代码：

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 */

CSS：

{{1}}

JSFiddle

我不擅长HTML，所以它可能非常混乱，但我简化了很多

Answer 1

导航栏会留下所有内容，因为您告诉它在z-index:-1;中使用#Nav留下内容。从#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

Answer 2

你需要在文本中加上一个margin-top：

#text {

/* brödtext*/

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

}

其中包含链接的固定元素会与包含文本的div重叠

2 个答案:

关于z-index