なぜz-indexが機能しないのですか？

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インデックスは.headerのZインデックス、その後小さいものの しかし、今では、次のようになります。

これは私が欲しいものです：何らかの理由

、Z-indexが」doesnの仕事。 私はZ値が.headerブロックに設定されている必要があります。これは、Z-インデックスを持つ別のブロックがあるためです。

Answer 1

親要素の子が親要素よりも高いZ-インデックスを持つようにするには、親の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; 

}