Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to position absolutely a div within a flex box without influencing the position of its siblings? [duplicate]

I've got a #text inside a flex #container and want to absolutely position something underneath it :

How could it not be taken in the calculation for the flex positioning of is siblings ?

#container{
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  position: relative;
  width: 95vw;
  height: 95vh;
  border: 1px solid black
}
#text{
  font-size: 13px;
  width: 50vw;
  text-align: justify;
}
#absolute{
  position: absolute;
  bottom: 5px;
  left: calc(47.5vw - 25px);
  width: 50px;
  text-align: center;
  color: red;
}
<div id="container">
  <div id="text">
    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga."
  </div>
  <div id="absolute">
    Absolutly
  </div>
</div>

As you'll notice the #text is slightly upside the center of is parent and I would like it perfectly vertically centered if possible without modifying :

  • The node tree

  • The already written flex properties (as justify-content in case of multiples .text elements)

Edit :

I've found another question on this matter, tried the solution without results : Absolute positioned item in a flex container still gets considered as item in IE & Firefox

It seems to be relative a Firefox and IE bug (I'm currently running Firefox 47, it works on Chromium.)

Final Edit :

I pushed my research on the subject and found many questions related (duplicate) :

  • Absolute positioning interfering with flexbox positioning in Firefox

  • Absolutely positioned flex item not being removed from normal flow in Firefox

  • Flexbox in Firefox: Items are not lined up properly

  • Answer by @Oriol Exclude element with fixed positioning from justify-content in flex layout

And a direct link to Bugzilla.

like image 320
PaulCo Avatar asked Sep 24 '16 07:09

PaulCo


People also ask

Can you use position absolute with flexbox?

If you position a flex item absolutely, it no longer participates in the flex layout. This means any flex properties on the item become moot. You can remove them if you like. The box alignment properties still apply to the flex item even if it is absolutely positioned, which means using align-self will have an effect.

How do you position elements in Flex?

Justify ContentFlex Start positions element at the start of the page. Flex End sets the element to the end of the page. Space Around arranges the items evenly but with spaces between them. The spaces will be equal among all the elements inside a flex-box container, but not outside them.

How do you move a position with an absolute element?

Absolute Positioning You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document. Move Left - Use a negative value for left. Move Right - Use a positive value for left. Move Up - Use a negative value for top.


1 Answers

As you've discovered, an absolutely-positioned flex item factors into justify-content calculations in some browsers despite the fact it should be removed from the normal flow.

As defined in the spec:

4.1. Absolutely-Positioned Flex Children

As it is out-of-flow, an absolutely-positioned child of a flex container does not participate in flex layout.

In Firefox and IE11, however, absolutely-positioned flex items act like normal siblings in terms of alignment with justify-content.

Here's an example. It works in current Chrome, Safari and Edge, but fails in Firefox and IE11.

flex-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  background-color: skyblue;
  height: 100px;
}
flex-item {
  background: lightgreen;
  width: 100px;
}
[abspos] {
  position: absolute;
  z-index: -1;
}
<flex-container>
  <flex-item>item 1</flex-item>
  <flex-item>item 2</flex-item>
  <flex-item abspos>item 3</flex-item>
</flex-container>

jsFiddle version


Although you're aware of the workarounds posted in other answers, I'll suggest an alternative approach in case you're caught in an XY problem.

My understanding is that you want to bottom-align one flex item, but have another item vertically centered in the container. Well, you don't necessarily need absolute positioning for this.

You can use an invisible pseudo-element that acts as a third flex item. This item will serve as a counterbalance to the bottom-aligned DOM element and keep the middle item centered.

Here are the details:

  • Center and bottom-align flex items
  • Methods for Aligning Flex Items (see boxes 62 & 66)
like image 182
Michael Benjamin Avatar answered Oct 17 '22 08:10

Michael Benjamin