[csswg-drafts] [css-position][css-flexbox][css-grid] Stack level of static flex or grid item with z-index?

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

== [css-position][css-flexbox][css-grid] Stack level of static flex or grid item with z-index? ==
In CSS 2.1, [`z-index`](http://www.w3.org/TR/CSS21/visuren.html#z-index) only applies to positioned elements, and specifies two different things:

> 1. The stack level of the box in the current stacking context.
> 2. Whether the box establishes a stacking context.

But [Flexbox](https://drafts.csswg.org/css-flexbox/#painting) says this:

> Flex items paint exactly the same as inline blocks [CSS21], except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static.

Then, unlike CSS2.1, setting `z-index` to some integer on a non-positioned flex item creates a stacking context. However, I don't see defined anywhere which should be the stack level of this stacking context.

According to the [this test](https://jsfiddle.net/osvphsga/1/), all Firefox, Chrome and Edge behave as if the flex items with `z-index` different than `auto` (including `0`) had `position: relative`, and thus the stack level is given by `z-index`.

But note that [CSS Position](https://drafts.csswg.org/css-position/#painting-order) explicitly requires positioning:

> 3. Stacking contexts formed by positioned descendants with negative z-indices (excluding 0) in z-index order (most negative first) then tree order.

<!-- -->

> 8. All positioned, opacity or transform descendants, in tree order that fall into the following categories

<!-- -->

> 9. Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index order (smallest first) then tree order. 

I think saying "create a stacking context even if position is static" is not enough, either CSS Flexbox should say that these flex items behave as if they were positioned when being painted, or CSS Position should take flex items into account in the painting algorithm.

And basically the same for [grid items](https://drafts.csswg.org/css-grid/#z-order):

> z-index values other than auto create a stacking context even if position is static. Thus the z-index property can easily be used to control the z-axis order of grid items.

Unlike Flexbox, at least the 2nd sentence hints that the `z-index` does more than just creating a stacking context, but it's still not clear.

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

Received on Saturday, 29 April 2017 20:47:35 UTC