Popover does not display correctly with elements inside `<dialog>`

[ed-asriyan]

Description

When a step includes a popover attached to an element inside a <dialog>, the popover is rendered behind the dialog instead of on top of it.

Steps to reproduce

1. Open the demo: https://jsfiddle.net/2dmf6nwp
2. Click Start driver.
3. Proceed to the step that opens the dialog.
4. Observe the popover for the dialog’s content.

Minimal reproducible example if jsfiddle link invalidated

<button id="startDriver">Start driver</button>
<button id="openDialog">Open dialog</button>

<dialog id="myDialog">
  <p>This is a dialog box!</p>
  <button id="closeDialog">Close</button>
</dialog>

const dialog = document.getElementById("myDialog");

document
  .getElementById('openDialog')
  .addEventListener('click', () => dialog.showModal());

document
  .getElementById('closeDialog')
  .addEventListener('click', () => dialog.close());


const driver = window.driver.js.driver;
const driverObj = driver({
  showProgress: true,
  steps: [
    {
      element: '#openDialog',
      popover: {
        title: 'Open dialog',
        description: 'This button opens a dialog',
        onNextClick: () => {
          dialog.showModal();
          driverObj.moveNext();          
        },
      },
    },
    {
      element: '#closeDialog',
      popover: {
        title: 'Close dialog',
        description: 'This button closes the dialog',
      },
    }
  ],
});

document
  .getElementById('startDriver')
  .addEventListener('click', () => driverObj.drive());

Result

The popover is displayed behind the dialog:

Expected result

The popover renders above the modal/dialog

[dominikschopper]

same here ... this has to do with dialog being always on top ;(

[ThetripGr]

the dialog element lives at the top layer of the document it will always be on top of every other layer