How does an order property work on absolutely positioned children of a flexible container?

Question

The head of the order property in CSS flexbox says:

Absolutely positioned children of a flexible container do not participate in the flexible layout, but reorder with any children with flexible elements.

I thought that order on absolutely positioned children of the container flex would fit one on top of the other, and I tried the 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 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 did not see the first circle over the second. I wonder what order means for absolutely positioned children?

Answer 1

The statement you specified from the specification:

Absolutely positioned children of the flexible container do not participate in the flexible layout, but reorder along with any flexible element of the children.

... actually does not exist in the definition of the order property. It was included at the end of the specification in the clarification section.

However, the definition of order says this:

Applies to: flexible elements and absolutely positioned children flexing containers

But this definition refers to absolutely positioned children of a flexible container. No further guidance or explanation.

Consequently, browser developers have considerable discretion in implementing this feature. And it seems that the main browsers have not even started the implementation, since testing shows that order does nothing on the abspos children of the flexible container. Tested in Chrome, FF, IE11 and Edge.

---

Here's an interesting comment from a related question :

I do not consider this a legal solution, but if I add position:absolute with some javascript after loading the page and not from the css file, order works as expected

Answer 2

Using position: absolute for a child of a flexbox does not make much sense, as it simply invalidates the flex-child status of that element. In your example, two children are simply placed as they would be without a flex container. Since both of them do not have upper / left / right / lower settings, they are both located in the upper left corner by default, above each other in the order in which they appear in the code - the last one above the previous one.

order parameters no longer have any effect, since these elements are no longer flexible elements, and order applies only to "real" flexible elements.

Look at my snippet: I just changed the first and second div (leaving all your other code as it is), so now the second div is on top of the first.

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

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

ADD AFTER COMMENTS from Michael_B:

Here is another snippet, with two additional “real” flexible elements. When all siblings have order parameters, this affects the "real" flexible elements, but not the absolutely positioned elements that simply fit on top of each other in the order in which they appear in the code, as well as on top of the flexible elements.

 .container {display: flex; } .child1, .child2 {position: absolute; } .child1 {background: red; order: 2;} .child2 {background: yellow; order: 4;} .child3 { border: 1px solid green; order: 3;} .child4 { border: 1px solid blue; order: 1;} 

 <div class="container"> <div class="child2">this is an second</div> <div class="child1">this is a first</div> <div class="child3">this is a real flex-item 3</div> <div class="child4">this is a real flex-item 4</div> </div>