HTML - Warum funktioniert der Z-Index nicht?

Question

Ich habe es einige Stunden versucht und das geht mir auf die Nerven. Ich arbeite mit Bootstrap und der spin.js-Bibliothek. Ich versuche, eine Farbschicht über ein img-Tag zu setzen, aber das funktioniert einfach nicht.

Der Code, den ich auf mich arbeiten, ist this

den CSS-Code

 .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; 
     } 

Der HTML-Code:

<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> 

jedoch vielen Dank.

Answer 1

Wie Sie position:relative geben, und top/left : 0 so die Elemente nicht überlappen Ich glaube, Sie brauchen position:absolute