Как можно расположить HTML-элемент в соответствии с обычным потоком при открытии с помощью showModal? ⇐ CSS

[Anonymous]

When using a 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; } open modal just show Some context below which the dialog should appear. click to close


Источник: https://stackoverflow.com/questions/739 ... ow-when-op