视频下方无法添加元素求助：代码位置正确但页面显示异常

• 代码中已将文本放置在视频容器元素下方，但页面渲染时文本始终显示在页面顶部；调整文本容器的z-index无效
• 实现滚动至视频末尾显示最后一帧图片的功能后，图片可随页面滚动上移，但仍无法在视频下方添加其他元素
• 页面审查发现video-container占满屏幕，无法理解为何文本不跟随正常页面流排列

video-container使用了**position: fixed**定位，该定位的元素会完全脱离正常文档流，不占据任何页面空间。因此，后续的文本元素会自动填充页面最顶部的空白区域，即便修改z-index也无法改变文档流的排列逻辑——你调整的只是图层层级，而非元素在文档流中的位置。

根据需求选择以下两种方案之一：

方案1：让视频容器回到文档流（文本自然跟随在下方） #

将video-container的定位改为position: relative，使其参与文档流布局，占据页面空间，后续元素会自动排列在其下方。

修改后的CSS代码 #

.video-container {
  position: relative; /* 替换fixed为relative，回归文档流 */
  left: 50%;
  top: 0;
  width: 100%;
  height: 400px; /* 直接设置固定高度，无需JS动态修改 */
  background-size: cover;
  transform: translateX(-50%);
  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;
  margin-top: 20px; /* 可选：与视频容器拉开间距 */
}

优化后的JS代码 #

移除动态修改容器高度的逻辑，同时增加视频加载完成的判断，避免报错：

function scrollVideo() {
  var video = document.getElementById("video");
  if (!video.duration) return; // 视频未加载完成时不执行逻辑
  var videoLength = video.duration;
  var scrollPosition = $(document).scrollTop();
  var windowHeight = $(window).height();
  var documentHeight = $(document).height();

  // 计算触发最后一帧的滚动阈值
  var threshold = documentHeight - windowHeight;

  // 根据滚动位置计算视频播放进度
  var videoPosition = (scrollPosition / (documentHeight - windowHeight)) * videoLength;

  if (scrollPosition >= threshold) {
    video.currentTime = videoLength;
    $("#video-container").css(
      "background-image",
      "url('VideosPictures/lastImage.png')"
    );
  } else {
    video.currentTime = videoPosition;
    $("#video-container").css("background-image", "none");
  }
}

// 视频加载完成后绑定滚动事件
$(document).ready(function() {
  $("#video").on("loadedmetadata", function() {
    $(window).scroll(scrollVideo);
    scrollVideo(); // 初始执行一次，确保状态正确
  });
});

方案2：保持视频固定在视口（需手动给文本留空间） #

如果需要视频始终固定在视口顶部，继续使用position: fixed，但给文本容器设置足够的margin-top，值等于视频容器的高度，强制文本排列在视频下方：

.Test{
  position: relative;
  display: block;
  z-index: 1;
  margin-top: 400px; /* 等于video-container的高度 */
}

注：若窗口高度动态变化，需额外通过JS监听窗口resize事件，实时调整margin-top的值。

内容的提问来源于stack exchange，提问作者Josh Moncarz