PaulCo PaulCo - 1 year ago 119
CSS Question

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

I've got a

inside a flex
and want to absolutely position something underneath it :

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

display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
position: relative;
width: 95vw;
height: 95vh;
border: 1px solid black
font-size: 13px;
width: 50vw;
text-align: justify;
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 id="absolute">

As you'll notice the
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
    in case of multiples

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) :

And a direct link to Bugzilla.

Answer Source

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-item>item 1</flex-item>
  <flex-item>item 2</flex-item>
  <flex-item abspos>item 3</flex-item>

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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download