Is it possible to position a div on top of a <dialog> tag that is not its parent?

Question

The <dialog> tag, when opened with showModal(), will display the elements between it and its closing tag while disabling all other elements on the page. My question is: is it possible to override this behavior for a specific element? Example:

HTML:

<div id="container">
  <dialog id="myDialog">
    <button id="close" type="reset">Close</button>
    <button id="create">Add Element</button>
  </dialog>
</div>

<menu>
  <button id="openButton">Open Dialog</button>
</menu>

CSS:

.new-element {
  width: 50px;
  height: 50px;
  border: 3px solid black;
  background-color: blue;
  position: fixed;
  top: 50%;
}

JS:

const container = document.getElementById('container');
const openButton = document.getElementById('openButton');
const closeButton = document.getElementById('close');
const createButton = document.getElementById('create');
const myDialog = document.getElementById('myDialog');

openButton.addEventListener('click', function() {
  myDialog.showModal();
});

closeButton.addEventListener('click', function() {
  myDialog.close();
});

createButton.addEventListener('click', function() {
  const div = document.createElement('div');
  div.classList.add('new-element')
  container.appendChild(div);
});

In a JSFiddle: https://jsfiddle.net/y7bkxvd4/

I'd like to find a way to position the blue square on top of the dialog. I realize it would be far easier to just append the new div to the dialog itself, but I've run into this in a situation where overflow was a concern and in using a module that uses react-portal. If it's not possible, cool, I can get behind that. But if it is, I'd like to know.

z-index has no effect, obviously.

Answer 1

The <dialog> element is added to the 'Top Layer' of the dom which has its own stacking order (z-index does not affect this -- it is set strictly by the order by which the elements are added). I don't believe you can manually add elements to this Top Layer, it is done in functions such as showModal(). You can find more information at: https://fullscreen.spec.whatwg.org/#new-stacking-layer but because the feature is still not universally supported its tough finding documentation on it. For example:

To remove an element from a top layer, remove element from top layer.

Real helpful..

A couple work arounds:

• Change the added element to a dialog as well and call .showModal() when the element is appended. The problem with this approach is that .showModal() makes all element outside that element unavailable for user interaction. That means that your blue box is on top, but its also means you can't click "Close" or "Add Element" on the other modal. (NOTE: You'll also notice the "Close/Add Element" dialog is greyed out -- you can override this by changing .new-element::backdrop{...} but it still won't the change the fact you can't click "Close" or "Add Element") Example here (with the backdrop removed)

• Change the added element to dialog, call .show() when the element is appended, and change the click event for 'Open Dialog' to .show() instead of .showModal. This allows you to also click past the blue box (even though its 'on top'), but it also allows you to click anywhere on the page (kind of defeating the purpose of a modal). The ::backdrop pseudo element is also not available because you are not using .showModal If you take this approach you would need to attach closing the blue box to the "Close" click event handler. Example here

My recommendation is to either use a plugin for modals (such as Bootstrap's) or make your own with the functionality you want (using Javascript). Dialogs are technically experiential technology so it won't be easy trying to get the behavior you want out of the box. This is probably as close as you will get, though you could improve it by adding your own "backdrop".