Fixed header getting hidden behind the navbar - html

Question

I am trying to implement fix header for my table in my angular 10 application. I have applied CSS and I can see that fixed header is working but it seems to hide behind the navbar when i try to scroll down. Please see the screenshot for more details . I tried manipulating the top property but doesnt seem to make a difference.
After scrolling
html table
<div class="container">
<div class="row">
<div class="col-12">
<button class="btnAddCustomer" (click)="addCustomer()"> Add Customer (Template Driven) </button>
</div>
</div>
<div class="row">
<div class="col-12">
<div *ngIf="customerDetails">
<table id="customerdetails-table" class="table table-bordered table-striped">
<thead>
<th>Customer</th>
<th>Company Name</th>
<th>Contact Name</th>
<th>Address</th>
<th>City</th>
<th>Postal Code</th>
<th>Country</th>
<th>Phone</th>
<th>View Order</th>
</thead>
<tbody>
<tr *ngFor="let custDetails of customerDetails">
<td>{{custDetails.customerId}}</td>
<td>{{custDetails.companyName}}</td>
<td>{{custDetails.contactName}}</td>
<td>{{custDetails.address}}</td>
<td>{{custDetails.city}}</td>
<td>{{custDetails.postalCode}}</td>
<td>{{custDetails.country}}</td>
<td>{{custDetails.phone}}</td>
<td>{{custDetails.customerId}}</td>
</tr>
</tbody>
</table>
<pagination [totalItems]="totalItems" [itemsPerPage] = "5" [maxSize]="maxSize" ></pagination>
</div>
</div>
</div>
</div>
CSS
table {
text-align: left;
position: relative;
}
th {
margin-top: 10px;
background: white;
position: sticky;
top: 0; /* Don't forget this, required for the stickiness */
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

Answer 1

You want the navbar to be infront of all your other HTML elements, it does not make sense to have another element overlap the navbar.
It sounds like you just want the table to be scrollable, if that's the case, put the table in a of fixed size (equal to the scrollable area that you want)
Example:
<div style = "height: 100px; width: 100px">
...your table stuff
</div>
Then add the functionality to make it so you can scroll through the table vertically by using the overflow-y property.
<div style = "height: 100px; width: 100px; overflow-y:auto">
...your table stuff
</div>
Making a div vertically scrollable using CSS