Question

可能重复：
Css z-index problem

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

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

如果没有位置，z-index不起作用：relative或position：absolute。

解决方案： 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应该可以解决问题。

CSS使用z-index

2 个答案: