Position absolute with scrollable page

Question

When I use the following css on a div:

  position: absolute;
  bottom: 70px;
  left: 0;
  right: 0;
  margin: auto;

my idea is to place the div in the middle (vertically) and 70px from the bottom of the page. This works when the whole page is visible on the viewport, however when the page is scrollable the div is positioned 70px from the bottom of the viewport, and not 70px from the bottom of the page. How do I solve this issue?

Edit:

Here is the relevant HTML:

<body>
...

<div class="bottomNav">
  <img src="images/instacircle.png" alt="instagram-icon" id="insta-icon" />
  <img src="images/mailcircle.png" alt="mail-icon" id="mail-icon" />
</div>
</body>

The css for the bottomNav is:

.bottomNav {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: max(10vw, 100px);
  height: 6vh;

  position: absolute;
  bottom:70px;
  left: 0;
  right: 0;
  margin: auto;

  background-color: rgba(184, 184, 184, 0.425);
  border: solid 3px rgba(75, 75, 75, 0.253);
  border-radius: 3px;
  text-align: center;
  color: white;
}

And the css for the body (parent) is:

body {
  background-color: rgb(46, 46, 46);
  color: rgba(219, 219, 219, 0.863);
}

`position:fixed;` will take the screen as reference , it probably is what you need :) — G-Cyrillus, Feb 12 '21 at 15:50
Not really, maybe my question wasnt clear. I want the div to be placed 70 px from the bottom of the page. So when Im scrolled to the top, the div shouldnt be visible. And when I scroll down to the bottom of the page, I want to see the div. If thats clear. — Jalpster, Feb 12 '21 at 15:53
Can you add your basic HTML structure to see where stands that absolute element and where stands the content of the page. relative/absolute for the parent/child could be an hint if not a guess — G-Cyrillus, Feb 12 '21 at 15:57

score 1 · Accepted Answer · answered Feb 12 '21 at 16:02

1

Most likely (you didnt provide source) the div has a non-positioned element as parent, and therefor will "absolutely" get positioned relative to the viewport.

Most common solution, if that is the case: Set

position: relative;

on the parent element.

answered Feb 12 '21 at 16:02

furioSys

121
3

This solved the problem, thanks a lot! :) – Jalpster Feb 12 '21 at 16:10

score 0 · Answer 2 · answered Feb 12 '21 at 15:51

0

You should position your div relative to the top of your page, so instead of:

bottom: 70px;

You need to use:

top: calc(100vh - 70px);

answered Feb 12 '21 at 15:51

Wais Kamal

5,858
2
17
36

Position absolute with scrollable page

2 Answers2