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

Question

我的网站是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%;
}

Answer 1

您需要在 title-container class 中添加 position: relative。这将使您的 z-index 能够正确显示。 z-index 仅适用于定位元素

Answer 2

添加这个css

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

结果

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

Error with z-index on video not allowing buttons and text to be shown

html

css

z-index