[csswg-drafts] [css-position] Ability to set a positioned element's containing block to another element (#5952)

LeaVerou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-position] Ability to set a positioned element's containing block to another element ==
This comes up very frequently in things like menus, popups, tooltips etc, and the current solutions are rather messy, involving copious amounts of flimsy JS code to monitor the element's position, scrolling, resizes etc and adjust the popup accordingly.

There is even a recent [proposal for a `<popup>` element](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Popup/explainer.md) whose main feature is that its position can be "anchored" to another element.

In [my opinion](https://github.com/w3ctag/design-reviews/issues/599#issuecomment-772497485) this is something that needs to be addressed in CSS, not by introducing new "magic" baked in to specific HTML elements.

Would it be feasible to set a positioned element's containing block to an arbitrary element in the tree?
If not feasible in the general case, what constraints would make it feasible? 

An obvious constraint is that the containing block cannot be a descendant of the element. What others are there?

We'd also need some way to prevent cycles, e.g. where A uses B as its containing block and B uses A as its containing block. One way to prevent cycles is cycle detection. Another way is to prevent them altogether, by only allowing elements that come *before* the positioned element in source order to be used as its containing block. This also has the advantage of limiting reflows during incremental rendering.

Also, does this make sense for other positions beyond `absolute`?

If any form of this is feasible, I could try and dream up some syntax based on the answers to these questions and form a more concrete proposal.

Related: https://github.com/w3c/csswg-drafts/issues/5699 though it doesn't address anchoring, but mainly allowing an element to spill out of an `overflow: hidden` container. However, changing the containing block was discussed there as a possible solution as well.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5952 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 8 February 2021 14:09:25 UTC