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

Question

私は数時間試してみましたが、これは私の神経になっています。私はブートストラップとspin.jsライブラリで作業しています。私はimgタグの上にカラーレイヤーを置こうとしていますが、これはうまくいきません。

私が働いているコードは、CSSコード

 .container-fluid { 
      position: relative; 
      padding: 0; 
      margin: 0; 
     } 
     .header{ 
      position: relative; 
      max-height: 920px; 
      height: 100%; 
     } 
     .header_layer{ 
      position: relative; 
      top: 0px; 
      left: 0px; 
      width: 100%; 
      height: 100px; 
      background-color: darkgrey; 
      z-index: 100; 
     } 
     .img_header{ 
      position: relative; 
      top: 0px; 
      left: 0px; 
      width: 100%; 
      z-index: 99; 
     } 

HTMLコードthis

次のとおりです。ただし

<div class="container-fluid"> 
    <div class="header col-md-12"> 
     <div class="header_layer"></div> 
     <img src="http://placehold.it/350x150" class="img-responsive img_header">   
    </div> 
</div> 

、どうもありがとう。

Answer 1

あなたはposition:relativeを与え、そしてtop/left : 0ように要素が、私はあなただけ低くインデックスが下とされている場合、あなたは、z-indexが最低から最高に行くことを知って、確認を行うことposition:absolute