Адаптивное CSS фоновое изображение с контейнером Sticky div

Question

У меня есть адаптивное фоновое изображение, которое занимает большую часть экрана с оверлеем контейнера div, частично перекрывающим это фоновое изображение. Я хочу, чтобы перекрывающийся контейнер div оставался прикрепленным к нижней части фонового изображения, чтобы он реагировал и перемещался вместе с нижним краем фонового изображения. Как бы я достиг этого эффекта?

CodeSandbox

В этом примере приложения React граница перекрывающего контейнера div, где находится белая область Встречается зеленая зона должна оставаться липкой к нижней части фонового изображения.

Приложение. js

import React from "react";
import "./styles.scss";

export default function App() {
  return (
    <div className="App">
      <section className="section-one">
        <div className="image-container">
          <div className="register-container">
            <div className="top" />
            <div className="bottom" />
          </div>
        </div>
      </section>
      <section className="section-two" />
      <section className="section-three" />
    </div>
  );
}

styles.s css

.App {
  font-family: sans-serif;
  text-align: center;

  .section-one {
    .image-container {
      position: relative;
      background-image: url('https://images.unsplash.com/photo-1511497584788-876760111969?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: bottom center;
      width: 100%;
      padding-top: 35%;

      // I want to stick this register-container where top class meets bottom class to the bottom edge of the background image
      // so that it stays fixed for users on all screen sizes
      .register-container {
        position: absolute;
        right: 250px;
        top: 19.5%;
        height: 640px;
        width: 500px;
        z-index: 100;
        .top {
          background-color: white;
          height: 83%;

        }
        // here should be fixed to bottom of background image
        .bottom {
          position: relative;
          background-color: green;
          height: 17%;
          right: 0;
        }
      }
    }

  }

  .section-two {
    height: 600px;
    background-color: blue;
  }

  .section-three {
    height: 400px;
    background-color: green;
  }
}

индекс. js

.App {
  font-family: sans-serif;
  text-align: center;

  .section-one {
    .image-container {
      position: relative;
      background-image: url('https://images.unsplash.com/photo-1511497584788-876760111969?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: bottom center;
      width: 100%;
      padding-top: 35%;

      // I want to stick this register-container where top class meets bottom class to the bottom edge of the background image
      // so that it stays fixed for users on all screen sizes
      .register-container {
        position: absolute;
        right: 250px;
        top: 19.5%;
        height: 640px;
        width: 500px;
        z-index: 100;
        .top {
          background-color: white;
          height: 83%;

        }
        // here should be fixed to bottom of background image
        .bottom {
          position: relative;
          background-color: green;
          height: 17%;
          right: 0;

          button {
            font-size: 3rem;
            position: absolute;
            right: 140px;
            top: -25px;
          }
        }
      }
    }

  }

  .section-two {
    height: 600px;
    background-color: blue;
  }

  .section-three {
    height: 400px;
    background-color: green;
  }
}