왜 z- 인덱스가 작동하지 않습니까?

Question

나는 간단한 HTML과 CSS 코드를 가지고 :

HTML :

<div class="header"> 
    <div class="tip"></div> 
</div> 

CSS :

.header { 
    display: block; 
    width: 260px; 
    min-height: 222px; 
    background-color: #252525; 
    position: relative; 
    z-index: 5; 
    -webkit-box-shadow: 0 0 5px #000; 
    -moz-box-shadow: 0 0 5px #000; 
    box-shadow: 0 0 5px #000; 
    border-radius: 2px; 
} 
.tip { 
    display: inline-block; 
    width: 10px; 
    height: 10px; 
    right: 11px; 
    top: -5px; 
    transform: rotateZ(45deg); 
    position: absolute; 
    z-index: 1; 
    background-color: red; 
    -webkit-box-shadow: 0 0 5px #000; 
    -moz-box-shadow: 0 0 5px #000; 
    box-shadow: 0 0 5px #000; 

} 

난 그냥 .tip 블록이 .header 블록 아래에 있었다 싶습니다. 그러나 .tip의 z-index가 .header의 Z- 인덱스 적은 다음하지만 지금은, 다음과 같습니다가 :

이 내가 원하는 무엇인가 : 어떤 이유

, Z- 인덱스는 '아무튼 일하지 마라. Z- 색인을 가진 또 다른 블록을 가지고 있기 때문에 .header 블록에 z- 색인을 설정해야합니다.

Answer 1

상위 요소의 하위 색인을 상위 요소보다 높게 만들려면, 상위 Z- 색인 값을 제거하십시오.

.header { 
 
    display: block; 
 
    width: 260px; 
 
    min-height: 222px; 
 
    background-color: #252525; 
 
    position: relative; 
 
    /*z-index: 5;*/ 
 
    -webkit-box-shadow: 0 0 5px #000; 
 
    -moz-box-shadow: 0 0 5px #000; 
 
    box-shadow: 0 0 5px #000; 
 
    border-radius: 2px; 
 
} 
 
.tip { 
 
    display: inline-block; 
 
    width: 10px; 
 
    height: 10px; 
 
    right: 11px; 
 
    top: -5px; 
 
    transform: rotateZ(45deg); 
 
    position: absolute; 
 
    z-index: -1; 
 
    background-color: red; 
 
    -webkit-box-shadow: 0 0 5px #000; 
 
    -moz-box-shadow: 0 0 5px #000; 
 
    box-shadow: 0 0 5px #000; 
 
}

<div class="header"> 
 
    <div class="tip"></div> 
 
</div>

Answer 2

-1 1 변경해 ... 및 z 인덱스 제거 : 첫번째 블록 (헤더)에서 5; 코드의이 부분의 모습 걸릴 :

이

.header { 
    display: block; 
    width: 260px; 
    min-height: 222px; 
    background-color: #252525; 
    position: relative; 
    -webkit-box-shadow: 0 0 5px #000; 
    -moz-box-shadow: 0 0 5px #000; 
    box-shadow: 0 0 5px #000; 
    border-radius: 2px; 
} 

.tip { 
    display: inline-block; 
    width: 10px; 
    height: 10px; 
    right: 11px; 
    top: -5px; 
    transform: rotateZ(45deg); 
    position: absolute; 
    z-index: -1; 
    background-color: red; 
    -webkit-box-shadow: 0 0 5px #000; 
    -moz-box-shadow: 0 0 5px #000; 
    box-shadow: 0 0 5px #000; 

}