使 div 覆盖完全匹配视频 div

【问题标题】：Make div overlay match video div exactly使 div 覆盖完全匹配视频 div
【发布时间】：2021-05-16 03:18:20
【问题描述】：

我正在尝试制作一个 div 以在 bootstrap4 中覆盖此 div

<div class="container text-center">
    <br>
    <h2>Remove Video Background</h2>
    <p>Example:</p>
    <div class="d-none d-md-block">
        <video width="320" height="240" controls loop autoplay>
        <source src="/static/backgroundremover.mp4" type="video/mp4">
        <source src="/static/backgroundremover.ogg" type="video/ogg">
        <img src="/static/backgroundremover.gif">
        Your browser does not support the video tag.
        </video>
    </div>
</div>

但我不确定将新的放在哪里或如何在 css 中将其调整为完全相同的大小。

我的最终目标是按照我在this question 中的要求使整个 div 可点击，并建议将此作为解决该问题的方法。

【问题讨论】：

freecodecamp.org/news/…

标签： html css bootstrap-4 html5-video

【解决方案1】：

定位存在一些奇怪的问题。过了一会儿，我了解到叠加层必须是兄弟 div，否则将无法正常工作。两者的位置都是绝对的也存在问题，一个必须是相对的，另一个必须是绝对的。

这是最终的css

#video {     position: relative; left: 0px; top: 0px; min-height: 100%;
         min-width: 100%; z-index: 9997; }
#overlay { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%;
           z-index: 9998; }

和html

<div class="d-none d-md-block">
  <div id="overlay"></div>
  <video id="video" width="320" height="240" controls loop autoplay>
  <source src="/static/backgroundremover.mp4" type="video/mp4">
  <source src="/static/backgroundremover.ogg" type="video/ogg">
  <img src="/static/backgroundremover.gif">
  Your browser does not support the video tag.
  </video>
</div>

【讨论】：