绝对定位的Flex项目不会从IE11中的正常流程中移除 [英] Absolutely positioned flex item is not removed from the normal flow in IE11
问题描述
我们有两个带有内容的div和一个带绝对位置背景的第三个div。
容器是一个弹性盒。
在Chrome和Safari中,所有工作都很好,但绝对定位的div中包含 Firefox和 IE11因子,并在div之间分配空间,就像连续有3个div一样。
我做了一个jsfiddle的例子。有没有办法解决这个错误?
https://jsfiddle.net/s18do03e/2/
div.container {display:flex; flex-direction:row;宽度:100%; height:300px; justify-content:space-between;宽度:100%;大纲:1px solid;} div.c1 {background:#aaeecc;宽度:100px;位置:相对; z-index:50; top:20px; display:flex;} div.c2 {background:#cceeaa;宽度:200px;位置:相对; z-index:50; top:20px; display:flex;} div.bg {background:#ccc;宽度:100%;身高:100%; z-index:0; left:0px; top:0px;位置:绝对; display:flex;}
< div class =container > < div class =c1>内容1< / div> < div class =c2>内容2< / div> < div class =bg>背景< / div>< / div>
这是因为
justify-content:space-between;
均匀分配物品第一个项目在开始,最后在最后。因此,只需在< div class =c1>内容1<< code>< div class =bg> Background< / div>
; / div> 和< div class =c2>内容2< / div>
像这样
< div class =container>
< div class =c1>内容1< / div>
< div class =bg>背景< / div>
< div class =c2>内容2< / div>
< / div>
您可以在 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
We have two divs with content and a third div that is a background with absolute position.
Container is a flexbox.
All works fine in Chrome and Safari, but Firefox and IE11 factors in the absolute positioned div, and distributes space between divs like there are 3 divs in a row.
I've made jsfiddle example. Is there any way to fix this bug? 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>
It is happening because justify-content: space-between;
Distribute items evenly The first item at the start, the last at the end. So just putt <div class="bg">Background</div>
between <div class="c1">Content 1</div>
and <div class="c2">Content 2</div>
like this
<div class="container">
<div class="c1">Content 1</div>
<div class="bg">Background</div>
<div class="c2">Content 2</div>
</div>
You can see the reason on https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
这篇关于绝对定位的Flex项目不会从IE11中的正常流程中移除的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!