Question

Possible Duplicate:
Css z-index problem

Is there away that I can get the border to appear behind the button? z-index:; does not seem to be working in this situation. 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 doesn’t work without position:relative or position:absolute.

Solution:
http://jsfiddle.net/k7htb/1/

Edit:

.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 */
}​