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?

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

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>