订单属性如何在Flex容器的绝对定位的子容器上工作？

Question

orderCSS flexbox中的属性章节说:

Flex容器的绝对定位子元素不参与flex布局,但与任何flex项目子项一起重新排序.

我认为order灵活容器的绝对定位的孩子会把一个放在另一个上,我尝试如下:

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

我换了order两个孩子:

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

我没有看到第一圈超过第二圈.我想知道秩序对绝对定位的孩子意味着什么？

Answer 1

您从规范中引用的声明：

Flex 容器的绝对定位子项不参与 Flex 布局，但会与任何 Flex 项目子项一起重新排序。

...实际上并不存在于order属性定义中。它包含在规范末尾的澄清部分中。

尽管如此，order定义确实是这样说的：

适用于：弹性项目和弹性容器的绝对定位子项

但这就是关于弹性容器的绝对定位子项的定义。没有进一步的指导或澄清。

因此，浏览器制造商在实现此功能方面拥有很大的自由裁量权。而且似乎主要浏览器甚至还没有开始实现，因为测试表明它对orderFlex 容器的 Abspos 子级没有任何作用。在 Chrome、FF、IE11 和 Edge 中进行了测试。

这是相关问题的有趣评论：

我不认为这是一个合法的解决方案，但是如果我position:absolute在页面加载后添加一些 javascript 而不是在 css 文件中，则可以order按预期工作