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

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

== [css-position] property to reverse stack/layer ordering (request/proposal) ==
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](http://jsbin.com/voguvam/edit?html,css,output) - 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.
```
.stack-page:nth-child(1) {z-index: 999;}
.stack-page:nth-child(2) {z-index: 998;}
.stack-page:nth-child(3) {z-index: 997;}
.stack-page:nth-child(4) {z-index: 996;}
.stack-page:nth-child(5) {z-index: 995;}
.stack-page:nth-child(6) {z-index: 994;}
.stack-page:nth-child(7) {z-index: 993;}
.stack-page:nth-child(8) {z-index: 992;}
.stack-page:nth-child(9) {z-index: 991;}
/* ... */
.stack-end {z-index: 1;}
```
And I know with the successful implementation of `order` within [[css-flexbox]](https://drafts.csswg.org/css-flexbox-1/#painting) ('_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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index)

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

Received on Thursday, 8 March 2018 02:31:47 UTC