Question

问题

我的网站上有一个固定的导航栏（z-index：98）和一个旋转横幅（z-index：96）。

但是，当我向下滚动时，相对位于横幅上的内容会比导航栏显示得更高（在z空间中）。

截图

Screenshot 1 Screenshot 2

代码

横幅：

div#banner {
    padding-top:60px;
    z-index: 98;
    width: 100%;
    background: url(../img/bannerImg_1.jpg) no-repeat center center;
    background-size:cover;
    height:340px;
    border-bottom: 1px solid #422358;
    box-shadow: 0 10px 10px -10px black;
    z-index: 96;
}

div#banner div#bannerWrap {
    width:1080px;
    margin: 0 auto;
    height:100%;
    position:relative;
}

div#bannerWrap div#logoLeft {
    position:absolute;
    top:50%; margin-top:-164px;
    left:0;
    width:305px;
    height:328px;
    background: url(../img/bannerLogo.png) no-repeat center center;
    float:left;
}

div#bannerWrap div#logoRight {
    position:absolute;
    top:50%; margin-top:-164px;
    right:0;
    width:305px;
    height:328px;
    background: url(../img/bannerLogo.png) no-repeat center center;
    float:right;
}

div#bannerWrap div#textRight {
    position:absolute;
    top:50%; margin-top:-20px;
    right:0;
    text-align:right;
    color:white;
    font-weight:bold;
    font-size:28px;
    text-shadow: 3px 3px 0 #1f3848;
    float:right;
}

导航栏：

div#topBar {
    width:100%;
    height:60px;
    margin:0 auto; padding:0;
    background: #1f3848;
    color:white;
    font-size:12px;
    position:fixed;
}

div#topBar div#tBContainer {
    width:1080px;
    margin: 0 auto; padding: 0;
}

div#topBar div#tBLogo {
    width:56px;
    height:60px;
    background: url(../img/tB_logo.png) no-repeat;
    display:block;
    float:left;
    margin-right:20px;
}

div#topBar div#tBLeft {
    float:left;
    padding-top:15px;
}

div#topBar div#tBRight {
    float:right;
    padding-top:15px;
    text-align:right;
}

Answer 1

默认情况下，z-Index无法使用position:static个元素。

它仅适用于position:relative/absolute/fixed元素。

这可能有效：

   div#banner
    {
        position:relative;
        z-index:96;
    }

参考：z-index - CSS-Tricks

Answer 2

为什么要给z-index值两次？此外，通过观看屏幕截图，由于z-index值较高，其清晰的横幅即将通过导航。要么给这一个负值，要么将正值更高的值赋予navigation。

div#banner {
padding-top:60px;
z-index: 98;/* repeated*/
width: 100%;
background: url(../img/bannerImg_1.jpg) no-repeat center center;
background-size:cover;
height:340px;
border-bottom: 1px solid #422358;
box-shadow: 0 10px 10px -10px black;
z-index: 96;/* repeated */
}

注意：使用z-index时需要使用relative或absolute
定位

Answer 3

z-index重复两次请检查。并且您不必为div＃banner指定任何z-index。请遵循以下css

div#banner {
padding-top:60px;
width: 100%;
background: url(../img/bannerImg_1.jpg) no-repeat center center;
background-size:cover;
height:340px;
border-bottom: 1px solid #422358;
box-shadow: 0 10px 10px -10px black;
}

div#topBar {
    width:100%;
    height:60px;
    margin:0 auto; padding:0;
    background: #1f3848;
    color:white;
    font-size:12px;
    position:fixed;
    z-index:2;
}

Div不使用z-index

3 个答案: