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

# My opinion

We need something like `anchor-name` for the parent/target and `anchor` for the child.
The following is as short as i can describe what i really miss in the positioning module...

## On the child:

1. The `position: anchor;` is used to make the element "fixed" outside (or even inside ?) the target
2. The `anchor` must not be used, and if so, it acts like `position:absolute`, to the next parent that is not fixed ...
3. An targets `overflow: hidden;` is not applied, because anchored elements are always visible
4. There should be an `anchor-self` to specify the corner that should match the targets corner 
5. There should be an `anchor-target` to specify the corner where the child will be placed with its corner
6. The corners are specified using common keywords like `top-left`, `right` or even `middle`
7. With that, yes, it can be possible to say `anchor-self: middle` and `anchar-target: middle` to center the box
8. If `anchor-self` and `anchor-target` are not used, the browser decides how to place the element (default like tooltips?)
9. Possible: If target is visible at the bottom-left in viewport, childs corner is bottom-left while targets corner is top-right. It is then placed right upper the target...
10. Introduce the anchor-axis, where childs will flip to a specific side if they are not positionable
10. Possible: If `anchor-axis` is e.g. horizontal or vertical (default) it will flip only on that axis
11. Possible: If `anchor-axis` is both the element will flip to other side if not "positionable"
12. Possible: If `anchor-axis` is none, it will never flip if not positionable (and therefor is `display:none`)
13. Another option could be something like `anchor-position: sticky` where the childs sticks as long as possible, e.g. if the parent is visible.
14. Nice would be an `anchor-distance` to define a "distance" margin between both elements
15. The `z-index` can be used inside the childs like as in position absolute...

But the most importend thing for me is handling the "edge" cases, and this gives me the idea for new pseudos that could be used in the following ways:

## `:anchors` or `:anchors(min(3))`

Used if the element has anchors (childs, and how many) attached to it.
Then we can handle most cases like draw only 3 Childs and not more than 3.

## `:viewport(inside bottom-left)`

Check if an element is in the specific region of the viewport.
If region is omitted, check if it is inside or outside the viewport.

Example: all elements matching in that viewport definition can be colored:

```
*:viewport(middle) {
  color: red;
}
```

where `viewport(middle)` can be define as `width:50vh;height:50vh;top:25vh;left:25:vw` ...

Maybe it will be cool if viewport regions can be specified like:

```
@viewport middle {
  width: 50vh;
  height:50vh;
  top: 25vh;
  left: 25:vw
}
```

### ex: `:viewport(outside top)`

not visible, but we knew it is at the top (we scrolled down).

What for? Yes, this can be used in Chat displays or even be used for "Scroll to bottom" buttons.

Example: Some chat openend, the new message is displayed at the bottom but the user scrolled up.

Some selector like `.target:has(.child:viewport(outside bottom)) button.new-messages` could be used to show a button?

really i need this!! :-)



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


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

Received on Sunday, 26 February 2023 21:18:05 UTC