绝对定位的Flex项不会从IE11中的正常流中删除。

Question

绝对定位的Flex项不会从IE11中的正常流中删除。

我们有两个有内容的div和第三个div，这是一个绝对位置的背景。

容器是一个柔性箱。

在Chrome和Safari中都很好，但是Firefox和IE11因子在绝对定位的div中，并在div之间分配空间，就像连续有3 div一样。

我做过小提琴的例子。有办法解决这个问题吗？https://jsfiddle.net/s18do03e/2/

div.container {

  display: flex;

  flex-direction: row;

  width: 100%;

  height: 300px;

  justify-content: space-between;

  width: 100%;

  outline: 1px solid;

}

div.c1 {

  background: #aaeecc;

  width: 100px;

  position: relative;

  z-index: 50;

  top: 20px;

  display: flex;

}

div.c2 {

  background: #cceeaa;

  width: 200px;

  position: relative;

  z-index: 50;

  top: 20px;

  display: flex;

}

div.bg {

  background: #ccc;

  width: 100%;

  height: 100%;

  z-index: 0;

  left: 0px;

  top: 0px;

  position: absolute;

  display: flex;

}

<div class="container">

  <div class="c1">Content 1</div>

  <div class="c2">Content 2</div>

  <div class="bg">Background</div>

</div>

Answer 1

有时不可能重新订购物品，例如当使用::before和::after..在这种情况下，您可以手动order元素。在你的例子中，你需要做的是：.c1&nbsp;{ &nbsp;&nbsp;order:&nbsp;-1;}.c2&nbsp;{ &nbsp;&nbsp;order:&nbsp;10;}这个order属性是flex规范并允许您重新订购FLEX项目(MDN参考)。这是非常方便的多种用途，包括。我用-1因为该值是序号，所以将其设置为负数可以确保它位于所有其他默认值之前，并且不需要指定::before..出于同样的原因，使用10确保第二个div是最后一个，即使您向容器中添加了一组元素。你可以增加到100或者别的什么。不过，火狐的行为似乎有悖常理。position: absolute通常删除常规dom流的元素，我希望该元素将从flex流也一样，就像Safari和Chrome一样。我不确定规范是否澄清了这一点。