Re: [csswg-drafts] [css-positioning] position: popover proposal (#5699)

This issue is worth revisiting now that the [`popover` API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) has shipped in all browsers.

Today, you can put pretty much anything in the top layer using code similar to below:

```html
<div id="p" popover="manual">
<script>
  p.showPopover();
</script>
```

This requires HTML and worse, it requires JavaScript.

Note: I'm talking about `popover="manual"` because it doesn't require any user interaction and doesn't have special behaviors (like closing on <kbd>Esc</kbd> keypress).

---

Why shouldn't it be possible to arbitrarily put things in top-layer declaratively using CSS (There was some discussion about this in #6965)

It would be immensely useful, and CSS feels like the correct place to do this. When migrating some of my old code over to `popover`, I found myself replacing a lot of CSS (`z-index: 9999`) with JavaScript, which is never a good thing.

There is even a UA-restricted [`overlay`](https://developer.mozilla.org/en-US/docs/Web/CSS/overlay) property that could be re-used for this purpose.

```css
#p {
  overlay: manual;
}
```

One of the issues I can foresee is loops. There will be a selector that only matches elements that are in the top-layer (#7319), and authors could use that selector to unset the declaration that placed the element in the top-layer in the first place.

```css
#p {
  overlay: manual;

  &:top-layer {
    overlay: unset;
  }
}
```

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


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

Received on Wednesday, 19 June 2024 19:11:27 UTC