Can't put any elements below a video even when code suggests it is below the video

Question

When I try to place text underneath a video it appears at the top of the page despite the line of code being below the line of code for the video.

I've tried setting the z-index higher on the test class to make sure it was above the video. I need the text ("test") below the video as I want to add more elements below the video.

This issue is different from other cases of placing a div below some other element because in my case, the code suggests that it is below the element, but that isn't reflected in the website itself.

I don't need anything fancy... Just want to place some plain text below the video, but I am having a hard time doing so.

Update: I made it so that when the user reaches the last frame of the video, it displays the last frame of the video as a picture which should scroll up like an image. I am still unable to put anything below the video. When inspecting the page I can see that the video-container is taking up the whole screen so I am confused as to why the text isn't following the flow of the page.

I will add the updated code below.

.video-container {
  display: flex;
  position: fixed;
  left: 50%;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  transform: translateX(-50%);
  z-index: -1;
  overflow: hidden;
}

.video-container::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  
}


.Test{
  position: relative;
  display: block;
  z-index: 1;

}

function scrollVideo() {
        var video = document.getElementById("video");
        var videoLength = video.duration;
        var scrollPosition = $(document).scrollTop();
        var windowHeight = $(window).height();
        var documentHeight = $(document).height();

        var videoContainerHeight = 400; // Set the desired height for the video container

        // Calculate the threshold position to trigger the last frame display
        var threshold = documentHeight - windowHeight;

        // Calculate the video position based on scroll
        var videoPosition =
          (scrollPosition / (documentHeight - windowHeight)) * videoLength;

        // Check if the user has scrolled to the end
        if (scrollPosition >= threshold) {
          video.currentTime = videoLength;
          $("#video-container").css(
            "background-image",
            "url('VideosPictures/lastImage.png')"
          );
        } else {
          // Calculate the video time based on the scroll position
          video.currentTime = videoPosition;
          $("#video-container").css("background-image", "none");
        }

        // Adjust the video container height to the set value
        $("#video-container").css("height", videoContainerHeight + "px");
      }

      $(window).scroll(function (e) {
        scrollVideo();
      });