[Popup] using position absolute while 'escaping out of stacking context'

[tlouisse]

A <dialog> will only 'escape out of its stacking context' (overflow:hidden or transform) when position: fixed is applied.

Would it be possible to achieve the same when position: absolute is applied as well?
For a popup positioned relative to an anchor/invoker, a recalculation would need to take place
on scroll/resize otherwise.

It would be nice if the top layer functionality described here could be implemented, while being able to position within the document flow.

[melanierichards]

I believe we were thinking position: absolute would be valid as well with popup + top layer and need to call that out explicitly, but @BoCupp-Microsoft can keep me honest here.

[mfreed7]

I agree - my understanding of the intention (and the actual implementation in Chromium) was that any positioning method should work. The <popup> is effectively moved to the "top layer" where it can be positioned as appropriate. The <popup> should not be clipped by parent containing blocks at all.

As for positioning relative to other content that is not in the top layer, that's the subject of a different issue.

[tlouisse]

Thanks, that's nice to hear 👍

Will it still be possible to 'undo' the top layer positioning as well via a css primitive, like proposed here?
w3c/csswg-drafts#5699
(I can see this coming in handy when creating responsive components that should look different on mobile and desktop)

[mfreed7]

Hmm, I'm not sure which part of that thread you're referring to, but the current proposal for <popup> doesn't have a way to not be displayed in the top layer. Can you help me understand the use case for a non-top-layer <popup>?

[tlouisse]

Basically I was referring to the opening post in the thread, which roughly proposes:

.my-panel {
  position: top-layer; /**  or any other name that indicates it should be placed on top layer */
}

If this proposal (or something similar) would make it, the <popup> could use it as a default value, and then values fixed|absolute|relative|static could be used to override this behavior.

A practical example would be configurability in different contexts.
Assume I want to create the the github dropdown that can be seen in action on this page (image of this can be found here: #445 (comment))

The only change I want to make to this example (this is a pattern that I've seen on the web different times) is that on desktop, it would put all options in a popup, like this:

desktop

And on mobile, the listbox options are in the document flow (a sibling of the input, and the parent is an overlay/dialog).

mobile

So on desktop the search listbox is an overlay, on mobile the the search listbox is in the document flow (it is contained in a parent overlay together with the input).

Let's say the (highly simplified) code below represents this component:

<github-combobox>
  #shadow-root
    <input role="combobox">
    <popup id="listbox" role="listbox">
      <div role="option"></div>
      <div role="option"></div>
      ... 
    </popup>
</github-combobox>

• On desktop #listbox needs to be shown as position: top-layer
• On mobile #listbox needs to be in document flow (so position:relative/static)

Since it is not possible to dynamically change html tags on desktop/mobile switch and recreating a cloned sibling dom tree is something to avoid at all costs (you would need to synchronize focus and other states), I can see the need for this css primitive.

Other examples

• https://lion-web-components.netlify.app/?path=/docs/forms-combobox-extensions--material-design#whatsapp

This page shows different extensions of a lion-combobox. The popup overlay display would be a sensible default for most comboboxes. The whatsapp example however, needs to be unstyled (listbox options need to be in page flow)

[melanierichards]

Thanks again for filing feedback, moving the discussion to openui/open-ui#326!