everywill everywill - 9 months ago 25
CSS Question

How does the order property work on absolutely-positioned children of a flex container?

Chapter of

property in CSS flexbox says:


Absolutely-positioned children of a flex container do not participate in flex layout, but are reordered together with any flex item children.


I thought
order
on absolutely-positioned children of a flex container would place one on another and I tried as following:



.container {display: flex}
.child1, .child2 {position: absolute}
.child1 {background: red}
.child2 {background: yellow}

<div class="container">
<div class="child1">this is a first</div>
<div class="child2">this is an second</div>
</div>





I changed the
order
of the two children:



.container {display: flex}
.child1, .child2 {position: absolute}
.child1 {background: red; order: 2;}
.child2 {background: yellow; order: 1;}

<div class="container">
<div class="child1">this is a first</div>
<div class="child2">this is an second</div>
</div>





and I didn't see the first lap over the second. I wonder what does order mean to absolutely-positioned children?

Answer Source

The statement you quoted from the spec:

Absolutely-positioned children of a flex container do not participate in flex layout, but are reordered together with any flex item children.

... doesn't actually exist in the order property definition. It's included at the end of the spec in the clarifications section.

Nonetheless, the order definition does say this:

Applies to: flex items and absolutely-positioned children of flex containers

But that's all the definition says about absolutely-positioned children of a flex container. There is no further guidance or clarification.

Therefore, browser makers have significant discretion in implementing this feature. And it appears that the major browsers have not even begun implementation, as testing shows that order is doing nothing on abspos children of a flex container. Tested in Chrome, FF, IE11 and Edge.