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

Question

Chapter of order 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?

Lookthrough

tabulation (for focusable elements ) should fit to orders value to remain coherent at screen.(links in a nav for example) . I believe that actually no browsers does it :( I do not think this should be interpreted as how elements are drawn at screen., it is morelike a z-index matter – Strove

I don't think this will work (read: be evident) if all the child elements are set to position: absolute. Try adding some non-position: absolute; children to the flex container to see an effect. – Festoonery

This works with position: relative;, for whatever reason, you'll need to resort to a z-index solution as @Festoonery has commented. – Kacerek

@Daniel James: Because relatively positioned elements can be flex items. – Overbid

Answer 1

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.

---

Here's an interesting comment from a related question:

I don't consider this a legitimate solution, but if I add position:absolute with some javascript after the page loads instead of it being in the css file, order works as expected

Physicality

Yep, demo of it not working in Firefox: jsfiddle.net/6Lkmt3vn/1 Ironically doesn't work well in Chrome 56 for me either. – Festoonery

That statement was last present in the March 2016 CR, in section 9.1. That section is a stub now (May 2016 CR), which might explain the lack of implementations. – Overbid

Answer 2

Using position: absolute for a flexbox child does not make much sense, since it simply annuls the flex-child status of that element. In your example, the two child elements are simply placed the way they would be without a flex container: Since they both don't have top/left/right/bottom settings, they are both placed at the default upper left corner, on top of each other, in the order they appear in the code - the latter one on top of the earlier one.

The order parameters don't have any influence anymore since those elements aren't flex-items anymore, and order only applies to "real" flex-items.

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

.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>

ADDED AFTER COMMENTS from Michael_B:

Here's another snippet, with two additional "real" flex-items. When all siblings have order parameters, this affects the "real" flex-items, but not the absolutely positioned items, which are simply placed on top of each other in the order in which they appear in the code, and also on top of the flex-items.

.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>

Mortify

Everything you're saying makes sense. Which makes me wonder why order would apply to abspos flex children in the first place. The spec clearly makes a point to include such elements in the ordering sequence. – Physicality

Also, your second paragraph contradicts the spec. – Physicality

@Michael_B I would say they aren't, from everything I see when I try different situations. The only thing I notice is that "real" flex-items act a bit different concerning their position when combined with absolutely positioned ones and when something like justify-content: space-between is used. – Mortify

Another thing to throw into the confusion: justify-content and align-items work on abspos items: jsfiddle.net/s3u8y9cd/2 (but that behavior is defined in the spec). – Physicality

@Michael_B I added another interesting snippet. – Mortify