视频上的 z-index 错误，不允许显示按钮和文本答案

【问题标题】：Error with z-index on video not allowing buttons and text to be shown视频上的 z-index 错误，不允许显示按钮和文本
【发布时间】：2018-09-25 16:24:46
【问题描述】：

我的网站是 dommazzola.com

我有一个自动播放的视频以及两个操作按钮和说明，这些按钮和说明应该显示在视频顶部。不幸的是，他们躲在视频后面。视频和按钮（.description 和 .title）有不同的 z-index。这些按钮一开始似乎会加载，但随后会隐藏在视频后面。

这是我的 CSS 文件和 HTML：

HTML

  <div class="homepage-hero-module">
  <div class="video-container">
    <div class="title-container">
      <div class="headline">
        <h1>Landscaping Taken Seriously</h1>
      </div>
      <div class="description">
        <div class="inner">Lexington Lawncare’s Landscaping has thrived because of a commitment to creating exceptional outdoor living environments.</div>
        <p><a class="btn btn-lg btn-success mt-2" href="#" role="button">Contact Us</a><span>  </span><a class="btn btn-lg btn-outline-success px-4 mt-2" href="#customer-logo-slider" role="button">Learn More</a></p>
      </div>
    </div>
    <div class="filter"></div>
    <!-- #TODO: NEED WEBM VIDEO FOR THIS TO WORK ON FIREFOX -->
    <video autoplay loop muted poster="static/images/slider12.jpg" class="fillWidth">
      <source src="https://d2cd6p07f07ng7.cloudfront.net/IMG_3036.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.</video>
    </div>
  </div>

CSS

.homepage-hero-module {
  border-right: none;
  border-left: none;
  position: relative;
}
.no-video .video-container video,
.touch .video-container video {
  display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
  display: block !important;
}
.video-container {
  position: relative;
  bottom: 0%;
  left: 0%;
  height: 100%; /* was 100% */
  width: 100%;
  overflow: hidden;
  background: #000;
}
.video-container .poster img {
  width: 100%;
  bottom: 0;
  position: absolute;
}
.video-container .filter {
  z-index: 100;
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
}
.video-container .title-container {
  z-index: 1000;
  margin-top: 32rem;
  top: 35%;
  width: 100%;
  text-align: center;
  color: #fff;
}
.video-container .headline {
  font-size: 3em; /* added */
}
.video-container .description .inner {
  font-size: 1.35em; /* was 1em */
  width: 50%; /* was 45% */
  margin: 0 auto;
}
.video-container .link {
  position: absolute;
  bottom: 3em;
  width: 100%;
  text-align: center;
  z-index: 1001;
  font-size: 2em;
  color: #fff;
}
.video-container .link a {
  color: #fff;
}
.video-container video {
  position: absolute;
  z-index: 0;
  bottom: 0;
}
.video-container video.fillWidth {
  width: 100%;
}

【问题讨论】：

标签： html css z-index

【解决方案1】：

添加这个css

.video-container .title-container{
    position: relative;
}

结果

【讨论】：

设置为相对
可能不是，检查你的css
这个修复在我尝试时有效。我也确实找不到相对的位置。
将文本描述和标题元素移动到视频中间而不只是调用引导边距的最佳方法是什么？
好吧，那么你需要做一些改变，这很难解释，我创建了与你的代码相关的css

【解决方案2】：

您需要将 position: relative 添加到您的 title-container 类中。这将允许您的z-index 正确显示。 z-index 仅适用于定位元素

【讨论】：

我的错，我没有正确粘贴我的 CSS。我有这个