This is a mock of dialog's default positioning.
A dialog can be styled and positioned using ordinary CSS. But its default
position is unusual: by default, a dialog is vertically centered in the
viewport when opened. It is still
position: absolute, so it can be
Here is a snippet to use default positioning.
<dialog id="dialog">This is a dialog.</dialog>
Note that the dialog can be anywhere in the DOM tree and is still vertically centered. E.g., for
<div style="position: absolute; top: 100px; left: 100px"> <div style="position: absolute: top: 10000px; left: 10000px"> [...] <dialog id="dialog">This is a dialog.</dialog> </div> </div>at
dialog.show(), the dialog is vertically positioned in the center of the viewport.
Click the button in the lower left to open a dialog.
Filler text follows to let you scroll.