How can the HTML <dialog> element be positioned according to normal flow when opened with showModal?

Question

When using a <dialog> element with .show() it is positioned according to normal position etc. CSS properties.

Is it possible to have that same positioning with .showModal()?

Even when using

dialog:modal {
  margin: 0;
  position: relative;
}

to override the browsers position: fixed the dialog ends up in the top left corner (checked with chromium and firefox).

EDIT: copying my comment here for better visibility and avoid more answers about CSS tweaking:

I know how to do computations and move the thing around with top and left. But this is what I would like to avoid.

Meaning I would like to just rip it out of the hands which hold it back as if position:fixed.

const button = document.getElementById('button');
const b2 = document.getElementById('b2');
const dialog = document.getElementById('dialog');
button.addEventListener('click', () => {dialog.showModal();});
b2.addEventListener('click', () => {dialog.show();});
dialog.addEventListener('click', () => {dialog.close();});

#dialog:modal, #dialog {
  margin: 0;
  position: relative;
}
#wrapper {
  background: #fafafa;
  position: relative;
}

<button id="button">open modal</button>
<button id="b2">just show</button>
<div id="wrapper">
  <div>Some context below which the dialog should appear.</div>
  <dialog id="dialog">click to close</dialog>
</div>

Answer 1

edited 04.03.24; thanks to JGC

Answer

Since the <dialog> element is in it's own layer (see this answer for more information) in relation to the rest of the DOM, it isn't possible to set it as inline, which I understood to be the question.

Positioning <dialog> in general

Also leaving this here for anyone searching for how to position dialogs: SebastianZ mentions in this comment, that the dialog is centered using margin: auto by default. Deactivating margins therefore allows positioning the dialog using absolute coordinates i. e. with top and left.

Example of a centered top dialog:

dialog {
 margin: 0; /* `margin: auto;` is the default. */
 transform: translateX(-50%);
 left: 50%;
}

<dialog open>
Foo
</dialog>

or, if you don't need full control and just want to center the modal at the top of the page:

dialog {
 margin-top: 0;
}

<dialog open>
Foo
</dialog>