绝对定位的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 {
  order: -1;}.c2 {
  order: 10;}

这个order属性是flex规范并允许您重新订购FLEX项目(MDN参考)。这是非常方便的多种用途，包括。

我用-1因为该值是序号，所以将其设置为负数可以确保它位于所有其他默认值之前，并且不需要指定::before..出于同样的原因，使用10确保第二个div是最后一个，即使您向容器中添加了一组元素。你可以增加到100或者别的什么。

不过，火狐的行为似乎有悖常理。position: absolute通常删除常规dom流的元素，我希望该元素将从flex流也一样，就像Safari和Chrome一样。我不确定规范是否澄清了这一点。