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

So I'll start out by saying there is a lot of complexity that the proposed `<popup>` element has avoided by placing in the top layer, e.g. you can snapshot the current (post-transform, post-scroll, etc) position of the "anchor" and position the popup relative to this.

(I believe that the popup is dismissed when something scrolls etc, which means that you don't need to synchronise this with composited scrolling).

@tabatkins & I wrote up some thoughts about something very similar to what @Crissov has just described a few months ago. And while this doesn't solve what `<popup>` is trying to achieve exactly it may still be useful.

(@tabatkins also has a blog post from 2010? with very similar ideas).

See here:
https://gist.github.com/bfgeek/60d4f57092eadcda0d4f32a8eb23b4c8

Effectively it is the same as proposed by @Crissov above. The "restriction" that makes this work from our perspective is that the "anchor" needs to be contained within the same containing-block subtree. E.g.

```html
<div class="position: relative;"> <!-- containing block -->
  <div style="position: absolute; top: top(foobar) 10px;"></div>
  <div>
    <div style="position:  relative;">
      <div style="anchor: foobar;"></div> <!-- this is ok -->
   </div>
  </div>
</div>

<div style="anchor: foobar2;"></div> <!-- can't reference this block -->
```

The other restrictions are this needs to be "pre-scroll", "pre-transform" similar to how other things in abspos works today. (This is what makes it not immediately useful for the `<popup>` usecase).

Restricting to an <ident> instead of an arbitary selector, or complex function has nice side effects. But any solution will need to limit to the containing-block subtree.

However with layering with ScrollTimeline etc, you could achieve some smooth linked effects (there may be a way to make this "magically happen" but its super complex to get into right now).


-- 
GitHub Notification of comment by bfgeek
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5952#issuecomment-776351769 using your GitHub account


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

Received on Wednesday, 10 February 2021 00:54:23 UTC