Any way to place a dialog over a modal dialog?

Question

I have a dropdown control which is implemented a dialog (seems a div would behave the same), any way to place it over a modal dialog so it would behave as a dropdown and be independent of the modal? Tried several things with z-index, no luck:

modal.showModal();

.dialog,
.popup {
  z-index: 100000;
  position: absolute;
}

#modal {
  z-index: 1000;
  top: 90px;
}

.popup {
  top: 70px;
  background: #faa;
  border: 1px solid gray;
}

dialog,
.popup {
  width: 400px;
  height: 300px;
}

<dialog open class="dialog">Dialog</dialog>
<div class="popup">Popup</div>
<dialog id="modal">Modal
  <dialog open class="dialog">Dialog</dialog>
  <div class="popup">Popup</div>
</dialog>

Answer 1

Thanks for the answers, I've just decided to open the modal full page size and use it as a top layer window where I show the actual dialog like container and every other dropdowns added to it (not to the body) will behave as i need