Keep footer at bottom of long page with an absolute positioned child

Question

I have a hero section with an absolute positioned text modal within the background image. I want that text modal to sit in the middle, over the background image no matter how long the text (page) is below the hero image section. I have narrowed down the issue to the CSS I have in place to keep the footer at the bottom of the page, below all the content. If I remove position: relative in the body CSS selector then the modal will sit right in the middle of hero section, as it should, but then my footer jumps up to the bottom of the viewport rather than the bottom of all the content on the page.

How do I keep the footer at the bottom of all the content on the page and keep my text modal in the vertical and horizontal center of the hero section?

See my Code Sandbox here: https://codesandbox.io/s/hero-page-jk8rr?file=/src/styles.css

Footer snippets:

body {
  margin: 0;
  min-height: 100vh;
  padding-bottom: 2.5rem;
}
.footer-wrap {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px 0;
  text-align: center;
  background-color: lightcoral;
}

Hero snippets:

.hero-container {
  height: 100%;
  width: 100%;
  margin-top: -5px;
  overflow: hidden;
}

.hero-media {
  position: relative;
  z-index: -1;
  vertical-align: middle;
  width: 100vw;
  height: 50vh;
  object-fit: cover;
}

.hero-modal {
  text-align: center;
  background-color: rgb(255, 255, 255, 0.95);
  border-radius: 5px;
  max-width: 60%;
  padding: 3rem 7rem;
  position: absolute;
  top: 30%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

...

       <div className="hero-container">
          <img
            alt="img"
            src={
              "https://firebasestorage.googleapis.com/v0/b/ship-form-template.appspot.com/o/public%2Fpexels-%C3%A1kos-szab%C3%B3-440731.jpg?alt=media&token=4261a8f1-cf36-45c5-b566-c5c2fa0dd16c"
            }
            className="hero-media"
          />
          <div className="hero-modal">
            <h2>Heading 2</h2>
            <p>
              Lorem ipsum body text goes here. Lorem ipsum body text goes here.
              Lorem ipsum body text goes here. Lorem ipsum body text goes here.
              Lorem ipsum body text goes here. Lorem ipsum body text goes here.
              Lorem ipsum body text goes here. Lorem ipsum body text goes here.
              Lorem ipsum body text goes here. Lorem ipsum body text goes here.
            </p>
            <button>CTA Button</button>
          </div>
        </div>

Answer 1

https://codesandbox.io/s/hero-page-forked-4mj3q?file=/src/styles.css

As you can see I removed the position: relative in the body tag because that makes the modal sit in the very middle of the page. You already got that right : )

Now because that is removed you don't need the position: absolute and bottom: 0 in the footer wrapper anymore because it will stay at the bottom of the page as it's the last element in html order. If you leave it tho it will position itself at the bottom of the loaded screen thats why it bugs somewhere in the middle.

The footer will not be at the very bottom just now because of the padding-bottom: 2.5rem; in the body tag. Remove that too and it should work just fine!