Element positioning with dialog/modal css

Question

Is it possible to place an element on top of a Dialog modal that is not a direct child of the dialog html/css/javascript?

When I am using the dialog element provided by html as a modal with the showModal() and close() javascript/jquery. I cannot seem to place any elements on top of the dialog or dialog backdrop no matter how high I set the z-index. is there a way to do this? Below is a simplified version of the problem:

const dialog = $("#dialog");
const openDialogBtn = $("#openDialog");
const closeDialogBtn = $("#closeDialog");

openDialogBtn.on("click", function() {
  dialog[0].showModal();
});

closeDialogBtn.on("click", function() {
  dialog[0].close();
});

.onTop {
  top: 10px;
  right: 10px; 
  z-index: 1000;
  background-color: yellow;
  padding: 10px;
}

dialog::backdrop {
  z-index: 999;
  background-color: rgb(0,0,0,0.8);
}

dialog {
  z-index: 998;
}

<div class="onTop" open>should be above/on top of dialog</div> 
<button id="openDialog">open</button>
<dialog id="dialog">
  <button id="closeDialog">close</button>
  dialog
</dialog>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Answer 1

u maynot use that z index thats already fixed, and dialog tag centered by using margin so u just need to decrease margin in that direction that u wanna be placed that dialog in your case is margin-top: 0; and dont forget using id it connect by it