Question

我目前正在网站上工作并遇到了一个有趣的问题。我有一个容纳我的导航栏的容器。由于某种原因，这个容器显示在其内容后面（它应该），但鼠标交互就好像它在内容前面一样。

我当前代码的JSFiddle https://jsfiddle.net/qzsxpgrq/

HTML

<div id="navbar">
    <div id="bar">
        <div id="navLeft">
            <div class="navL navbutton"><a href="">About</a></div>
            <div class="navL navbutton"><a href="">The Team</a></div>
        </div>

        <div id="navLogo">
            <div id="logo">
                <img src="http://www.epicyoobed.com/res/img/navLogo.png"/>
            </div>
        </div>

        <div id="navRight">
            <div class="navR navbutton"><a href="">Programs</a></div>
            <div class="navR navbutton"><a href="">Contact</a></div>
        </div>
    </div>
</div>

CSS

html {
    height: 100%;
    font-family: arial;
}
body {
    margin: 0;
    padding: 0;
    background-color: #BBB;
}
#navbar {
    margin: 0;
    padding: 0;
    height: 80px;
    width: 100%;
    position: fixed;
    display: block;
    z-index: 1;
}
#bar {
    display: block;
    position: fixed;
    width: 100%;
    height: 40px;
    background-image: url("http://www.epicyoobed.com/res/img/nav.png");
}
#navRight {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 45%;
    position: absolute;
    display: block;
    float: left;
    top: 0;
    right: 0;
}
#navbar div div a {
    display: block;
    text-decoration: none;
    padding-top: 5px;
    color: #000;
    width: 100%;
    height: 100%;
    font-size: 20px;
}
.current {
    background-image: url("http://www.epicyoobed.com/res/img/nav_sel.png");
    background-repeat: repeat-x;
}
.navL {
    float: right;
}
.navR {
    float: left;
}
.navbutton {
    display: block;
    position: relative;
    width: 150px;
    height: 100%;
    text-align: center;
}
.navbutton:hover {
    background-image: url("http://www.epicyoobed.com/res/img/nav_sel.png");
    background-repeat: repeat-x;
}
#navLogo {
    margin: auto;
    height: 40px;
    width: 100%;
    position: absolute;
    display: block;
    z-index: 2;
}
#logo {
    margin: auto;
    height: 80px;
    width: 80px;
}
#navLeft {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 45%;
    position: absolute;
    display: block;
    float: right;
}

Answer 1

Xetanai尝试在#navLeft和navRight中添加3的z-index。

#navLeft {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 45%;
    position: absolute;
    display: block;
    float: right;
    z-index:3;
}
#navRight {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 45%;
    position: absolute;
    display: block;
    float: left;
    top: 0;
    right: 0;
    z-index:3;
}

您遇到的问题是因为徽标宽度为100％且z-index为2.有效地将其放置在左右容器上方。

元素显示在其容器前面，但无法与其进行交互

1 个答案: