CSS를 사용

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- 색인 위치없이 작동하지 않는다 : 기준 또는 위치 : 절대.

솔루션 : 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에 추가하면 트릭을 수행해야합니다.