[css-position] property to reverse stack/layer ordering (request/proposal)

[jonjohnjohnson]

https://drafts.csswg.org/css-position-3/#layered-presentation

Not sure how eager browsers would be to develop the feature, but I'm sure most of us have come upon the cumbersome task of needing to shuffle around and/or overspecify z-index values to create effects like...

Example - Notice as you scroll all subsequent pages are revealed from below the current page.

To accomplish a simple reversal of layers in that example, you either have to specify the reverse sequence to the nth z-index or use a flex container that sets flex-direction: column-reverse while reversing the semantic sequence of your content (order-accessibility).

.item:nth-child(1) {z-index: 999;}
.item:nth-child(2) {z-index: 998;}
.item:nth-child(3) {z-index: 997;}
.item:nth-child(4) {z-index: 996;}
.item:nth-child(5) {z-index: 995;}
.item:nth-child(6) {z-index: 994;}
.item:nth-child(7) {z-index: 993;}
.item:nth-child(8) {z-index: 992;}
.item:nth-child(9) {z-index: 991;}
...
.item:nth-child(999) {z-index: 1;}

And I know with the successful implementation of order within [css-flexbox] ('order-modified document order is used in place of raw document order') the implementation might actually be simple. And even if this predicament isn't the biggest in the CSS world, it's still more cumbersome than seemingly needs to be?

Proposing a non inherited property that sets a reverse sequenced local stacking context?

layer-ordering: forward | reverse

With forward being the initial value and guessing reverse would lead to a child element with z-index: 1 sitting above a sibling set to z-index: 2 as well as all other 'normal' layering visualizing in reverse.

Further Reading -> MDN Stacking without z-index

[jonjohnjohnson]

@LeaVerou comment about z-index reversing #1026 (comment)

[tabatkins]

Punting to the eventual Stacking Context spec, now that we've removed that section from Positioning.

[kizu]

I was recently exploring the possibilities of scroll-driven animations, and controlling the stack/layer ordering was one of the things I experimented on — and it seems that with the scroll-driven animations we could have a work-around/polyfill for this.

Here is the section talking about this case inside my article: https://kizu.dev/position-driven-styles/#controlling-the-stacking

TLDR; we can assign the z-index for elements in a container based on their position inside of it.

This won't solve all the cases for layering, as it requires elements to be in the same context and have at least initial position over one of the axes in a certain order, so it would be still nice to see some way to control this natively.