[css-stacking] named stacking contexts and containing blocks

[mayank99]

While thinking about #9107, i was wondering if it would be possible to do something like this:

.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.

.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.

.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:

• [css-position] Ability to set a positioned element's containing block to another element #5952
• [css-position] ‘Sticky’ behavior is too limited as position scheme created from the elements nearest block level ancestor & margins #2496
• [css-anchor-position-1] Could anchor positioning work for defining the targets of sticky elements? #8905