Create modal window with adjustable z-index

by GCyrillus

HTML

<h1>Modal & z-index</h1>

<button onclick="openModal()">Open Modal</button>

<div class="notification">
  This notification should be on top of the modal backdrop.
</div>

<dialog id="modal" class="modal">
   <div class="modal-content">
     <div>Modal Content</div>
   </div>
</dialog>

CSS

.notification {
  z-index: 1090;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #afa;
}

.modal {
  z-index: 1055;
  background-color: #aaf;
  height: fit-content;
}

.modal::backdrop {
  background-color: #0000008f;
  backdrop-filter: blur(0.375rem);
}

JavaScript

function openModal() {
let modalEl = document.getElementById('modal')
modalEl.showModal();
}