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

问题描述

说：

我以为顺序在一个flex容器的绝对定位的孩子会放置一个另一个，我试着如下：
$ b

  .container {display：flex} .child1，.child2 {position：absolute} .child1 {background：red} .child2 {background：yellow}  

< div class =container> < div class =child1>这是第一个< / div> < div class =child2>这是第二个< / div>< / div>

b
$ b

我改变了两个孩子的顺序：

  .container {display：flex} .child1，.child2 {position：absolute} .child1 {background：red; order：2;}。child2 {background：yellow; order：1;}  

 < div class =container > < div class =child1>这是第一个< / div> < div class =child2>这是第二个< / div>< / div>  

b
$ b

我没有看到第二圈的第一圈。我不知道命令对绝对定位的孩子意味着什么？

解决方案

您从spec中引用的语句：

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

因此，浏览器制造商在实现这一功能方面具有很大的自由裁量权。而且主流浏览器似乎还没有开始实施，因为 order 在flex容器的abspos子节点上什么都不做。在Chrome，FF，IE11和Edge测试。

---

以下是一个有趣的评论：：

Chapter of order property in CSS flexbox says:

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?

解决方案

The statement you quoted from the spec:

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

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:

这篇关于订单属性如何在Flex容器的绝对定位的子级上工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！