Does position absolute conflict with Flexbox

Question

I want to make a div stick on the top of the screen without any influence to other elements  and its child element in the center    x000D   x000D    parent   x000D     display  flex  x000D     justify-content  center  x000D     position  absolute  x000D     x000D   lt div class  parent  gt  x000D     lt div class  child  gt text lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    When I add the position  absolute line  justify-content  center becomes invalid  Do they conflict with each other and  what s the solution   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  1 and align-self  stretch  both not working  I ended up using Dimensions to get the full width of the window and it worked   EDIT  As of newer version of React Native  I m with 0 49   it accepts width  100

User · Answer

You have to give width 100  to parent to center the text    x000D   x000D    parent   x000D     display  flex  x000D     justify-content  center  x000D     position  absolute  x000D     width 100  x000D     x000D   lt div class  parent  gt  x000D     lt div class  child  gt text lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    If you also need to centre align vertically  give height 100  and align-itens  center   parent      display  flex     justify-content  center     align-items  center     position  absolute     width 100      height  100

User · Answer

In my case  the issue was that I had another element in the center of the div with a conflicting z-index    x000D   x000D   wrapper   x000D    color  white  x000D    width  320px  x000D    position  relative  x000D    border  1px dashed gray  x000D    height  40px x000D    x000D   x000D   parent   x000D    position  absolute  x000D    display  flex  x000D    justify-content  center  x000D    top  20px  x000D    left  0  x000D    right  0  x000D       This z-index override is needed to display on top of the other x000D       div  Or  just swap the order of the HTML tags     x000D    z-index  1  x000D    x000D   x000D   child   x000D    background  green  x000D    x000D   x000D   conflicting   x000D    position  absolute  x000D    left  120px  x000D    height  40px  x000D    background  red  x000D    margin  0 auto  x000D    x000D   lt div class  wrapper  gt  x000D     lt div class  parent  gt  x000D       lt div class  child  gt  x000D         Centered x000D       lt  div gt  x000D     lt  div gt  x000D     lt div class  conflicting  gt  x000D      Conflicting x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

you have forgotten width of parent   x000D   x000D   parent   x000D     display  flex  x000D     justify-content  center  x000D     position  absolute  x000D     width 100  x000D     x000D   lt div class  parent  gt  x000D     lt div class  child  gt text lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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  like display  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    That said  absolutely positioning conflicts with flex children      As it is out-of-flow  an absolutely-positioned child of a flex   container does not participate in flex layout

[css] Does 'position: absolute' conflict with Flexbox?

Examples related to css

Examples related to react-native

Examples related to flexbox