ı have a website and ı want to change ui.There is a navbar in my project.My goal is just to overlap the images on the home page with the navbar. I used and changed z-index many times. But I couldn’t overlap the image and the navbar. And i will make the navbar transparent.

images in home.html

navbar in app.html

home html :

  <div>
    <div>
      <a routerLink="/store" routerLinkActive="active">
        <img src="anyimage" alt="Banner 8">
      </a>
    </div>
    <div>
      <a routerLink="/store" routerLinkActive="active">
        <img src="anyimage" alt="Banner 14">
      </a>
    </div>
  </div>

app.html :

div class="banner" *ngIf="isBannerVisible">
  {{ currentText }}
</div>
<nav [class]="navbarClass">
  
  <div class="container-fluid">
    
      <h1 class="asd animated navbar-brand abs"><a  style=" text-decoration: none;color:black" routerLink="/home" routerLinkActive="active" >CALIENNA</a></h1>
      <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNavbar" aria-controls="collapseNavbar" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>
      
      <div class="collapse navbar-collapse " id="collapseNavbar">
          <ul class="navbar-nav ps-sm-5" >
            <li class="nav-item animated2">
              <a class="nav-link" routerLink="/store" routerLinkActive="active" data-bs-toggle="collapse">Mağaza</a>
          </li>

              <li class="nav-item animated2">
                  <a class="nav-link" routerLink="/hakkimizda" routerLinkActive="active">Hakkımızda</a>
              </li>
              <li class="nav-item active">
                <a class="nav-link animated2" routerLink="/iletisim" routerLinkActive="active">Bize Ulaşın</a>
            </li>
          </ul>
        
      </div>
  </div>

</nav>

<div class="min-vh-100 d-flex flex-column
                justify-content-between">



<router-outlet ></router-outlet>

</div>

app.css :

.banner {
  width: 100%;
  background-color: #f8d7da;
  color: #721c24;
  text-align: center;
  padding: 10px;
  position: fixed; 
  top: 0;
  left: 0;
  z-index: 1050; 
  transition: opacity 0.5s ease-in-out;
}
.navbar {
  z-index: 1000; 
  position: relative; 
  margin-top: 40px; 
  transition: background-color 0.3s ease;
}
.navbar.transparent {
  background-color: rgba(255, 255, 255, 0); 
}
.navbar.visible {
  background-color: rgba(255, 255, 255, 0.9); 
}