[csswg-drafts] named stacking contexts and containing blocks (#9108)

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

== named stacking contexts and containing blocks ==
While thinking about https://github.com/w3c/csswg-drafts/issues/9107, i was wondering if it would be possible to do something like this:
```css
.foo {
  stacking-context-name: foo;

  .bar {
    /*
     * this is only relative to other z-indices in the "foo" stacking context.
     * it "does not exist" as far as any other z-indices are concerned.
     */
    z-index-context: foo;
    z-index: -1;
  }
}
```
Containers can overlap, so if stacking contexts could also overlap, this could open up some cool possibilities. In the example above, a parent of `.foo` could create a stacking context that a child of `.foo` would be able to use.

Not sure if this would be achievable but it would certainly be useful.

Currently the next best option is to explicitly create a stacking context, but it's not airtight.
```css
.foo {
  isolation: isolate; /* create stacking context */

  .bar {
    /*
     * this is relative to every z-index inside .foo :(
     * (until the next nested stacking context is found)
     */
    z-index:-1;
  }
}
```

---

The same idea could be applied to containing blocks.
```css
.foo {
  containing-block-name: foo;
  position: relative;

  .bar {
    position: relative;
    transform: translateX(0); /* oops, created a containing block */

    .baz {
      /* still placed relative to "foo", not nearest CB :)  */
      position-containing-block: foo;
      position: fixed;
      inset-inline-end: 0;
    }
  }
}
```

But it looks like this might be possible to achieve using anchor positioning? Related issues:
- https://github.com/w3c/csswg-drafts/issues/5952
- https://github.com/w3c/csswg-drafts/issues/2496

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


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

Received on Monday, 24 July 2023 19:33:11 UTC