Fixed header without transparent background

Question

I have a header fixed on my page with a background image, when the scrolling happens the header goes along and has to overlap the html that is underneath, and does not become transparent, but it is transparent.

HTML:

<div class="background-banco-horas">
  <!-- ! -->
  <div class="container cab ">
    <app-header></app-header> <!-- do banco_de_hora -->
    <div class="row font-text text-light mat-name ">
      <div class="col">
        <p>Matrícula: 000495</p>
      </div>
      <!-- ! -->
      <div class="col">
        <p class="name text-upp">Nome: ELIANA MARCOLINO MACEDO</p>
      </div>
    </div>
    <!-- ! -->
    <div class="row font-text text-light mat-name ">
      <div class="col">
        <p>Matrícula: {{respMat}}</p>
      </div>
      <!-- ! -->
      <div class="col">
        <p class="name">Gerente: {{respNome}}</p>
      </div>
    </div>
    <!-- ! -->
    <div class="row font-text text-light mat-name ">
      <div class="col">
        <p>Matrícula: {{matriculaColab}}</p>
      </div>
      <!-- ! -->
      <div class="col">
        <p class="name">Colaborador(a): {{nomeColab}}</p>
      </div>
    </div>
    <!-- ! -->
    <div class="row hour_default border-bottom">
      <div class="col-sm-lg">
        <p class="text-light">HORÁRIO PADRÃO:</p>
      </div>
      <!-- ! -->
      <div class="col-sm">
        <p class="text-light">8:00 - 12:00 - 13:00 - 18:00</p>
      </div>
    </div>
</div>
</div>
</div>

CSS:

.cab {
  background: url('../../../assets/img/background_mod_bdh.png') no-repeat center;
  background-size: cover;      
  position: fixed;
  top: 0;
  left: 0;
  right: 0;    
  max-height: 10px !important;
  height: 50px !important;
  margin: 0 auto;    
}

Answer 1

I managed to solve by putting the z-index: 1;

.cab {
  background: url('../../../assets/img/background_mod_bdh.png') no-repeat center;
  background-size: cover;
  // fixar no top
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  max-height: 10px !important;
  height: 50px !important;
  margin: 0 auto; //centraliza um elem
  z-index: 1;

}