[csswg-drafts] [css-will-change] Do `will-change: position` and `will-change: z-index` establish a stacking context? (#11827)

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

== [css-will-change] Do `will-change: position` and `will-change: z-index` establish a stacking context? ==
https://drafts.csswg.org/css-will-change/#valdef-will-change-custom-ident

> If any non-initial value of a property would create a stacking context on the element, specifying that property in [will-change](https://drafts.csswg.org/css-will-change/#propdef-will-change) must create a stacking context on the element.

What does this mean for `position` and `z-index`? There is no value of these properties that establish a stacking context just by itself (*). But when both properties are paired together, they can.

(*) Not always, at least. But `z-index` can establish a stacking context by itself on flex and grid items.

So should `will-change: position` and `will-change: z-index` establish a stacking context?

| | Gecko | Blink | WebKit |
| - | - | - | - |
| `will-change: position` | ✔  | ✔ | ✔ |
| `will-change: z-index` | ❌ | ✔ | ✔ |

`will-change: z-index` doesn't establish a stacking context in Gecko, not even on a flex item.

```html
<!DOCTYPE html>
<style>
div { display: inline-block; background: red; width: 100px; }
div::before { content: ""; display: block; position: relative; z-index: -1; background: green; height: 100px; }
</style>
<div style="will-change: auto"></div>
<div style="will-change: position"></div>
<div style="will-change: z-index"></div>
<div style="will-change: transform"></div>
```

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


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

Received on Wednesday, 5 March 2025 00:18:03 UTC