Dialog element not showing correctly
In a previous post about dialogs I already explained how nicely the native dialog element works.
I recently used dialogs to show popups for 'map markers'. But I rendered the list of dialog inside a div somewhere on page. But this made the dialog not inherit styles properly and it positioned itself in the parent div and not 'above' evertyhing.
So apparently the <dialog> element has some unique default behavior — especially around positioning and stacking context — and placing it inside a container div rather than directly in the <body> can cause:
- Unexpected styling issues, especially if the parent container has styles like
position: relative,overflow: hidden, or transforms. - Dialog not appearing as expected, or not overlaying the full screen.
Why placing <dialog> in <body> matters:
-
<dialog>is meant to be a top-layer element, like a modal, and by default it is absolutely/fixed-positioned relative to the viewport. -
If nested inside a styled container, it might:
- Be clipped.
- Inherit styles unintentionally.
- Lose its natural ability to center itself or overlay the whole page.
Dialog in body
Place the <dialog> directly inside <body> for best results. For example:
<body>
<dialog id="pupup_dialog">
<p>Pupup</p>
<button onclick="document.getElementById('pupup_dialog').close()">Close</button>
</dialog>
</body>