如何使用HTML/CSS在视频上覆盖元素

我正在用Bootstrap5建立一个网站，在主页上有一个全屏视频。我尝试了几种方法使导航栏和标题覆盖视频，但我很难让它们位于顶部，而其余内容则位于视频下方。 任何帮助都将不胜感激

这是叠加标题！
#我的视频{
z指数：-1；
右：0；
底部：0；
对象匹配：覆盖；
宽度：100vw；
高度：100vh；

---

}

尝试将视频的

z-index

设置为-1，以便在背景中移动它（假设它已经指定了

位置：绝对

）

#我的视频{
z指数：-1；
}

谢谢@rauberdaniel，真是太棒了！你知道一种方法吗？我可以让覆盖仅应用于导航栏和标题，并让所有其他内容显示在视频下方？你只需要为不同元素正确指定z索引。例如，给视频一个z索引1，给导航栏和标题一个z索引2。请注意，z索引仅在元素位置不是默认的

静态
时有效：
<section id="header">
        <div class="container-fluid edge">
            <div class="row justify-content-center">
                <div class="col-12">
                    <nav class="navbar navbar-expand-lg navbar-dark">
                        <div class="container-fluid">
                            <a class="navbar-brand" href="#">Navbar</a>
                            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                            </button>
                            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                                <div class="navbar-nav">
                                    <a class="nav-link" href="#">About</a>
                                    <a class="nav-link" href="#">Events</a>
                                </div>
                            </div>
                        </div>
                    </nav>
                    <h1>This is the Overlay Title!</h1>
                    <video playsinline autoplay muted loop id="myVideo">
                        <source src="assets/video/crowd_sample.mp4" type="video/mp4">
                    </video>
                </div>
            </div>
        </div>
    </section>


#myVideo {
z-index: -1;
right: 0;
bottom: 0;
object-fit: cover;
width: 100vw;
height: 100vh;