The article <a href="https://fullystacked.net/portal/" author="Ollie Williams" source="Fully Stacked">Do JavaScript frameworks still need portals?</a> explains a bit more about the relationship between <c>dialog</c>, <c>popover</c>, and <c>anchor</c> as well as how these elements have made "portal" support in frameworks obsolete. The following ~20-minute video shows how to use only CSS and HTML to position and display elements, regardless of their nesting in the document. <media href="https://www.youtube.com/watch?v=DNXEORSk4GU" src="https://www.youtube.com/v/DNXEORSk4GU" source="YouTube" width="560px" author="Kevin Powell" caption="CSS Popover + Anchor Positioning is Magical"> The main example uses <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning" source="MDN">CSS anchor positioning</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position-try" author="" source="MDN">position-try</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:popover-open" author="" source="MDN">:popover-open</a>. You can use <c>position-try</c> to direct the browser to adjust the appearance of the popover when there isn't enough "space" on-screen at its default position. You can also animate everything. <img src="{att_link}popover_menu.jpg" href="{att_link}popover_menu.jpg" align="right" caption="Popover menu" scale="50%"><code><macro convert="-all">.user-button { padding: 0; border-radius: 100vw; aspect-ratio: 1; <hl>anchor-name: --profile-button;</hl> } .profile-menu { <hl>position: absolute; position-anchor: --profile-button top: anchor (bottom) ; right: anchor(right);</hl> margin: 0; inset: auto; margin-block-start: 6px; } <hl>.profile-menu:popover-open { display: grid; }</hl> @position-try --bottom { inset: unset; top: anchor(bottom); right: anchor(right); }<macro convert="+all"></code>