位置问题：绝对和视频

Question

我目前正在为视频制作人的网站工作。当你去他的网页时，他想让他的演示卷轴在后台运行。我试图创建一些将在视频上播放的div元素。它们实际上就位于网页的顶部，有点像导航栏，但不是真的。

以下是我正在使用的代码。当然，你在运行时无法看到内容，但也许我在某些地方有错误。

＆＃13;

＆＃13;

.background-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	top: 0;
	left: 0;
  background: #353030;
}

#video-background {
  position: relative;
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: 500; 
  height: 500;
  z-index: 100;
}


#header-container {
  position: relative;
  display: inline;
   z-index: 200;
}

.header-item {
  color: white;
  letter-spacing: 3px;
  text-align: center;
  position: absolute;

＆＃13;

<div class="background-wrap">
  <video width="1700" height="956" autoplay muted loop id="video-background"> 
			<source src="img/reel.mp4" type="video/mp4">
			<source src="img/reel.webm" type="video/webm">
			<source src="img/reel.ogv" type="video/ogg">
			Sorry, your browser doesn't support HTML5 video.
		</video>
  <div class="row" id="header-container">
    <div class="col-md-4">
      <div class="header-item">
        <h1 id="title">Josh Kelley</h1>
      </div>
    </div>
    <div class="col-md-4">
      <div class="header-item">
        <h3 id="subtitle" href="https://vimeo.com/204080098" target="_blank">Video Production &amp; Photography</h3>
      </div>
    </div>
    <div class="col-md-4">
      <div class="header-item">
        <a id="subtitlebutton1" href="#about" class="btn btn-dark btn-lg">About Me</a>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我最大的问题是当我将.header-item更改为position：absolute时。

当我使用开发人员工具检查元素时，内容会在上面的视频下方被粉碎。您甚至可以看到“关于我”按钮正在显示中途。

以下是＃header-container更改为position：relative并将位置css属性从.header-item中删除时的样子。

我已经在RED中标记了我想要的元素。任何帮助都会很棒。