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.

 .parent {
   display: flex;
   justify-content: center;
   position: absolute;
 }

<div class="parent">
  <div class="child">text</div>
</div>

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%.

Solution 1

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.

Solution 2

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>

Solution 3

You have to give width:100% to parent to center the text.

 .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

.parent {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   width:100%;
   height: 100%;
 }

Solution 4

In my case, the issue was that I had another element in the center of the div with a conflicting 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>

View more solutions

Comments

[Shivkumar kondi]

this may be helpful to you.. css-tricks.com/almanac/properties/p/position

[aruno]

The behavior of this changed sometime in 2016 - developers.google.com/web/updates/2016/06/…