https://i.sstatic.net/09QtK.png
Within my Angular 7 project, I have implemented a Bootstrap modal. However, I am facing an issue where only components with position: relative are darkened when the modal is opened. Some components have position: fixed, as shown in the screenshot below. Interestingly, all other components with z-index less than 2 do not darken when the modal popup appears.
<div class="modal fade" *ngIf="deleteDialogOpened" id="deleteModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header " >
<h5 class="modal-title">Confirmation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p style="margin-top: 20px; margin-bottom: 20px; text-align: left;">Are you sure you want to delete {{this.currentUser.firstName}}?</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal" (click)="close('cancelDeleteDialog')">Cancel</button>
<button class="submit-btn btn btn-elevate kt-login__btn-primary" data-dismiss="modal" (click)="close('delete')">Delete</button>
</div>
</div>
</div>
</div>