div 内的视频背景和文本不随页面的其余部分滚动？

问题描述

我正在尝试制作带有文本的视频背景以某种方式定位，但是当我向上滚动整个页面时，文本和视频不滚动/移动？我做错了什么？

  position: fixed;
  right: 0;
  bottom: 0;
  min-width:100%;
  min-height:100%;
  color: #fff;
  z-index:0;
  text-shadow: 0 0 5px #000000;
}

 .overlayText {
position: fixed;
top: 25%;
left: 25%;
color:#fff;
z-index:1;
}

<div class="bannervideo">
  <video autoplay loop muted class="bannervideo" poster="video.jpg">
    <source src="/s/Blueheadervideos.mp4" type="video/mp4">
  </video>
  <center><div class="overlayText">
    <p style="font-size:3vw; font-weight: 500;">Headline here</p>
    <p style="font-size:1.5vw; font-weight: 500;">tagline</p> </div>

     <div class="overlaybottomText">
<p style="font-size:1.5vw;">More words go here </p> 
  </div>  ```

解决方法

两个选择器上的 position: fixed; 将固定相对于窗口的元素。尝试 position: absolute 代替 .overlayText

.overlayText {
    position: absolute;
    top: 25%;
    left: 25%;
    color:#fff;
    z-index:1;
}

和 position: absolute 或 position: relative 用于父元素 .bannervideo。