0
0 Comments

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>
Anonymous Asked question May 14, 2021