It's a big problem. In fact I wish a better layer stack API instead of having a special top-layer for dialog. Problematic UI use cases: - z-index is a hint, t

It's a big problem. In fact I wish a better layer stack API instead of having a special top-layer for dialog. Problematic UI use cases: - z-index is a hint, the real layering depends on the positioning of the parent element. The usual trick is to insert an element at the bottom of the DOM, and then use z-index. - If you create a Dropdown or a popup UI (eg. a date picker), the accessibility of focus handling is hard. Your component needs to appear in a top-layer but by inserting it in a div at the bottom, you loose the tab order that goes from the trigger button to the popup. (there is an aria attribute to associate the control, but at least VoiceOver ignores it, and the browser doesn't respect the tab-order). - The dialog element not only solves the positioning on top, it also solves the focus-trap that is needed for a keyboard navigable (accesible) UI. - It's possible to use dialog for a non-modal popup. However, the specs doesn't say much about layering. (in fact a quick dialog test in Chrome/Firefox/Safari... they don't follow a predictable layer positioning). The thing is, if you need to create a dialog, tooltip, dropdown, or popup today... you need a lot of hacks.