css - CSS 使用 z-index

Question

可能重复：
Css z-index 问题

有没有我可以让边框出现在按钮后面？ z-index:;在这种情况下似乎不起作用。 JS小提琴

HTML：

<div class="scheduleArea">
   <button class="button"></button>     
</div>
 <nav class="nav">
    <ul>
        <li><a href="#">Send Now</a></li>
        <li><a href="#">Edit Message</a></li>
    </ul>
</nav>  
</div>

CSS：

.scheduleArea{
    width:100px;
    height:100px;
    float:right;
    margin:-15px 0 0 0;
    border:1px solid red;
}
.scheduleArea .button{
    width:100px;
    height:28px;
    background:url('../images/schedule.png') no-repeat center center;
    border:none;
    margin:0 auto;
}
.nav{
    float:right;
    height:57px;
    width:168px;
    margin:10px -100px 0 0;
    border-radius:3px;
    border:3px solid #B5B5B5;
    z-index:-20;
}

Answer 1

如果没有 position:relative 或 position:absolute，z-index 将不起作用。

解决方案：http: //jsfiddle.net/k7htb/1/

编辑：

.nav{
    float:right;
    height:57px;
    width:168px;
    margin:10px -100px 0 0;
    border-radius:3px;
    border:3px solid #B5B5B5;
    z-index:-20;
    position:relative; /* This line is added */
}​

Answer 2

z-index仅适用于定位元素。添加position:relative并应该可以解决问题.scheduleArea。.nav