CSS 'position: absolute' 是否与 Flexbox 冲突？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41033245/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Does 'position: absolute' conflict with Flexbox?
提问by Stanley Luo
I want to make a divstick on the top of the screen without any influence to other elements, and its child element in the center.
我想div在屏幕顶部制作一个棍子，而不会对其他元素产生任何影响，并且它的子元素在中心。
.parent {
display: flex;
justify-content: center;
position: absolute;
}<div class="parent">
<div class="child">text</div>
</div>When I add the position: absoluteline, justify-content: centerbecomes invalid. Do they conflict with each other and, what's the solution?
当我添加该position: absolute行时，justify-content: center变得无效。它们是否相互冲突，解决方案是什么？
EDIT
编辑
Thanks guys it's the problem of parent width. But I'm in React Native, so I can't set width: 100%. Tried flex: 1and align-self: stretch, both not working. I ended up using Dimensionsto get the full width of the window and it worked.
谢谢大家，这是父宽度的问题。但是我在 React Native 中，所以我无法设置width: 100%. 试过flex: 1和align-self: stretch，既没有工作。我最终使用Dimensions来获取窗口的全宽并且它起作用了。
EDIT
编辑
As of newer version of React Native (I'm with 0.49), it accepts width: 100%.
对于较新版本的 React Native（我使用的是 0.49），它接受width: 100%.
采纳答案by Oriol
No, absolutely positioning does not conflict with flex containers. Making an element be a flex container only affects its inner layout model, that is, the way in which its contents are laid out. Positioning affects the element itself, and can alter its outer role for flow layout.
不，绝对定位与弹性容器不冲突。使元素成为弹性容器只会影响其内部布局模型，即其内容的布局方式。定位影响元素本身，并且可以改变其在流布局中的外部角色。
That means that
这意味着
If you add absolute positioning to an element with
display: inline-flex, it will become block-level (likedisplay: flex), but will still generate a flex formatting context.If you add absolute positioning to an element with
display: flex, it will be sized using the shrink-to-fit algorithm (typical of inline-level containers) instead of the fill-available one.
如果使用 为元素添加绝对定位
display: inline-flex，它将成为块级（如display: flex），但仍会生成 flex 格式上下文。如果您使用 向元素添加绝对定位
display: flex，则将使用缩小以适应算法（典型的内联级容器）而不是填充可用算法来调整其大小。
That said, absolutely positioning conflicts with flex children.
也就是说，绝对定位与 flex children 冲突。
As it is out-of-flow, an absolutely-positioned child of a flex container does not participate in flex layout.
由于它是流出的，一个绝对定位的 flex 容器的孩子不参与 flex 布局。
回答by Shivkumar kondi
you have forgotten width of parent
你忘记了父母的宽度
.parent {
display: flex;
justify-content: center;
position: absolute;
width:100%
}<div class="parent">
<div class="child">text</div>
</div>回答by Kalpesh Patel
You have to give width:100%to parent to centerthe text.
你必须把文本width:100%交给父母center。
.parent {
display: flex;
justify-content: center;
position: absolute;
width:100%
}<div class="parent">
<div class="child">text</div>
</div>If you also need to centre align vertically, give height:100%and align-itens: center
如果您还需要垂直居中对齐，请给出height:100%和align-itens: center
.parent {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width:100%;
height: 100%;
}
回答by Trent Bing
In my case, the issue was that I had another element in the center of the div with a conflicting z-index.
就我而言，问题是我在 div 的中心有另一个元素与 z-index 冲突。
.wrapper {
color: white;
width: 320px;
position: relative;
border: 1px dashed gray;
height: 40px
}
.parent {
position: absolute;
display: flex;
justify-content: center;
top: 20px;
left: 0;
right: 0;
/* This z-index override is needed to display on top of the other
div. Or, just swap the order of the HTML tags. */
z-index: 1;
}
.child {
background: green;
}
.conflicting {
position: absolute;
left: 120px;
height: 40px;
background: red;
margin: 0 auto;
}<div class="wrapper">
<div class="parent">
<div class="child">
Centered
</div>
</div>
<div class="conflicting">
Conflicting
</div>
</div>