CSS - 调整窗口宽度会突然导致div之间出现空白区域

Question

我正在建立的网站上有两个div重叠。一个是循环视频，另一个是带有文本的简单框。

我的窗口全屏显示，带有文字的div会按预期重叠到视频上，但是当我使屏幕的宽度变小时，div会突然从视频向下推，导致两者之间出现空白区域。感谢任何帮助，谢谢！

以下是视频定位的代码： `

 position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;

`

这是另一个div定位的css： `

min-height: 900px;
min-width: 10em;
height: 900px;
z-index: 3;
width: 100%;
position: absolute;
text-align: center;
top: 55em; 
background-color: rgba(0, 0, 0, 0.5);
overflow: hidden;

`

如果这有帮助，在HTML中，视频和此div不在同一容器中，并且HTML文件中的两者之间还有其他几个div。