Question

我有以下内容：

主要摘录如下：

HTML

<div id="wrapper">
    <div id="innerwrapper">
        <div id="nav">
            <div id="about" class="menu1">About</div>
            <div id="aboutsub">
                <div id="team" class="menu2">Team</div>
                <div id="experience" class="menu2">Experience</div>
                <div id="difference" class="menu2">Difference</div>
            </div>
            <div id="work" class="menu1">Work</div>
            <div id="portfolio" class="menu1">Portfolio</div>
            <div id="contact" class="menu1">Contact</div>
        </div>
        <div id="outerviewer">
            <div id="innerviewer">This is where the main text goes.</div>
        </div>
    </div>
</div>

CSS

#outerviewer {
    float: right;
    width: 576px;
    height: 700px;
    background: #63c5ff;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    z-index: 100;
}
#innerviewer {
    width: 506px;
    height: 630px;
    background: white;
    position: relative;
    top: 5px;
    left: 10px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    outline: 0px solid black;
    padding: 25px;
}
.menu2 {
    position: absolute;
    background-image:url('../img/BTF_Tab_Sub.png');
    background: purple;
    width: 80px;
    height: 42px;
    left: 100px;
    cursor: pointer;
}

我希望类menu2的项目与menu1的项目一样，并将光标更改为指针。但是，他们没有，并且向按钮添加javascript不会返回任何事件。

我已经尝试弄乱z-index无济于事，有人可以建议为什么menu2项目无法点击以及我如何解决它？

Answer 1

似乎我必须设置

#outerviewer
{
    position: relative;
}

我不知道为什么，但是如果有人解释得很好，我会给他们打勾以帮助别人知道原因。

Answer 2

Re：position:relative;，z-index仅适用于定位元素（相对，绝对或固定）。

w3 wiki记下了z-index

•仅适用于定位元素（位置：绝对;，位置：相对;或位置：固定;）。

w3 CSS2 spec表示z-index

适用于：定位元素

Answer 3

Updated fiddle

子菜单上有一个负z-index。

我的更改：

#about {

    z-index:0;
}
#aboutsub {

    z-index: 1;
}

#innerviewer {
    z-index:10;
}

Answer 4

当我在aboutsub div中取出z-index：-1时，所需的光标显示在紫色子菜单上。

<div>元素就像它隐藏在</div>之类的东西一样

4 个答案: