相关疑难解决方法(0)

我们有两个带内容的div和第三个div,它是具有绝对位置的背景.

Container是一个flexbox.

一切都在Chrome和Safari中运行良好,但Firefox和 IE11在绝对定位div中起作用,并在div之间分配空间,就像连续有3个div一样.

我做了jsfiddle的例子.有没有办法解决这个错误？ 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 …

我在flexbox上有一个复杂的问题.基本上,我的演示适用于Chrome,但不适用于Firefox.以下是我的HTML代码:

<div class="flex-main-container">

    <img src="http://www.modifiedstreetcars.com/sites/default/files/styles/carousel_circle/public/Nissan-GTR-White-Custom1.jpg?itok=RTxhTPOv" alt="">
    <img src="http://www.buntycars.com/contents/member/buntycars/photos/Hot-Modified-Car-Wallpape-721c6.jpg" alt="">

    <figure>
        <img src="http://modscar.net/wp-content/uploads/2016/04/30-MODIFIED-CARS-ARE-SHINING-AT-THE-ZOMBIE-APOCALYPSE.jpg" alt="">
        <figcaption>explanatory caption</figcaption>
    </figure>
    <figure>
        <img src="http://modscar.net/wp-content/uploads/2016/04/30-MODIFIED-CARS-ARE-SHINING-AT-THE-ZOMBIE-APOCALYPSE.jpg" alt="">
        <figcaption>explanatory caption</figcaption>
    </figure>

</div>

现在,文档中有关于flex容器中定位元素的以下内容:

由于它不在流动状态,Flex容器的绝对定位子元素不参与flex布局.

更多信息在这里

现在我已经定位了两个元素,即图像绝对如此:

.flex-main-container > img:nth-of-type(1) {
        position: absolute;
        left: 0;
        top: 0;
}

.flex-main-container > img:nth-of-type(2) {
        position: absolute;
        left: 100px;
        top: 150px;
} 

现在在容器上我有以下代码:

.flex-main-container {
        background: #eee;
        display: flex;
        height: 500px;
        align-items:flex-start;
        justify-content:space-between;
        flex-direction: column;
} 

现在我希望剩下的元素justify-content:space-between在主容器上垂直展开.我确实在Chrome中获得了所需的行为.见下面的截图:

但是FIREFOX中的BU是你看到的东西

请注意,在Firefox中,黑色汽车图像与Chrome中的右上角没有对齐.在某种程度上在Firefox中,绝对定位的元素似乎仍然干扰其余元素的定位,我认为不应该这样.

有人可以解释为什么会这样吗？为什么Firefox允许绝对定位的元素干扰其他静态元素的定位？

PS这是一个"为什么"的问题.我不只是在寻找一个"黑客"来解决这个问题,但我实际上对这为什么会发生这种情况感兴趣.

谢谢.