How to navigate around an absolute position element


My page - In simple terms, when using absolute elements how do you make the elements around it ‘see it’ without using relative positioning?

As you can see my footer is overlapping the absolute element.


Try using z-index

Z-index isn’t the issue, the issue is that the footer needs to be clear of the elements above it as if it were a static positioned element.

Can someone correct the following:

  1. I can solve the issue by adding body - 120vh to give space to the bottom:
  2. Or I can add margin-bottom to .inner-flex-container which creates a ‘container’ around the white bubble keeping it clear of the footer.

Neither of these seem like the ideal way.