Absolute position doesn't work inside children of flex

Question

I don't know what's wrong. Here is a short demo of an unexpected behavior :

https://jsfiddle.net/JackIsJack/wfadbu67/16/

#parent {
  display: flex;
  flex-direction: row;
}

.child {
  background-color:red;
  width: 50px;
  height: 50px;
  margin: 5px 5px 5px 5px;
}

.menu {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 10px;
  background-color: blue;
}

<div id="parent">
  <div class="child">1</div>
  <div class="child">2<div class="menu"></div></div>
  <div class="child">3</div>
</div>

Can someone give me a clue ?

Expected behavior : https://i.stack.imgur.com/TOMfm.png

Chrome 88.0.4324 (I only use chrome)

Thanks !

You need to add **position: relative;** in parent then **position: absolute;** will work on child. — Raeesh Alam, Feb 13 '21 at 15:06

score 1 · Answer 1 · answered Feb 13 '21 at 15:01

1

You need to add position:relative to parent element of menu which has a child class:

.child {
  display: flex;
  flex-direction: row;
  position: relative
}

answered Feb 13 '21 at 15:01

Shuvo

1,253
9
18

score 0 · Answer 2 · answered Feb 13 '21 at 15:01

give the parent a relative positionning, so it becomes the reference for the absolute child.

#parent {
  display: flex;
  flex-direction: row;
}

.child {
  background-color:red;
  width: 50px;
  height: 50px;
  margin: 5px 5px 5px 5px;
  position:relative;
}

.menu {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 10px;
  background-color: blue;
}

<div id="parent">
  <div class="child">1</div>
  <div class="child">2<div class="menu"></div></div>
  <div class="child">3</div>
</div>

Lakshya Thakur · Answer 3 · 2021-02-13T15:11:55.597

Your parent element i.e. element with class child should be a positioned element for your element with class menu.

If you see from MDN, the definition says the following for an absolutely positioned element :-

It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

In your case , for child to be positioned element, give it a position:relative so that menu can now be absolutely positioned relative to it (the closest positioned ancestor)

Also positioned elements are all elements that do not have the default position:static value.

#parent {
  display: flex;
  flex-direction: row;
}

.child {
  position:relative;
  background-color:red;
  width: 50px;
  height: 50px;
  margin: 5px 5px 5px 5px;
}

.menu {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 10px;
  background-color: blue;
}

<div id="parent">
  <div class="child">1</div>
  <div class="child">2<div class="menu"></div></div>
  <div class="child">3</div>
</div>

Absolute position doesn't work inside children of flex

3 Answers3