在完整的背景视频下方放置一个 div答案

【问题标题】：Put a div bellow a full back-ground video在完整的背景视频下方放置一个 div
【发布时间】：2017-05-30 10:59:18
【问题描述】：

我在使用完整的背景视频时遇到了一些问题。因为我不能在视频下方放置任何其他内容。像另一个部分等。

这是我的代码：

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1 class="title">Quer achar o emprego dos seus sonhos?</h1>
      <p class="sub-title">Com a Joobber é fácil!</p>
          <video autoplay loop muted poster="screenshot.jpg" id="background">
              <source src="video/work.mp4" type="video/mp4">
          </video>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 new-section">
      <h1>NEW SECTION</h1>
    </div>
  </div>
</div>


<%- include partials/footer.ejs %>

这是我的 CSS：

#background{
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url(polina.jpg) no-repeat;
  background-size: cover;
}


.title{
  text-align: center;
}
.sub-title{
  text-align: center;
}

.new-section{
  width: 100%;
  height: 20em;
  background-color: black;
}

问题是我创建的任何内容都位于视频容器的中间。我想把它放在下面。

关于正在发生的事情的打印屏幕：Problem

【问题讨论】：

我认为是因为position:fixed; 到你的#background..
我想是的。你知道如何制作具有绝对位置的完整背景视频吗？当我更改为绝对值时，有些事情会有点奇怪

标签： javascript html css twitter-bootstrap frontend

【解决方案1】：

在您的标题上尝试“padding-top: 200px:”，看看会发生什么。（这个数字必须调整。）还有一些其他的选择，但我认为应该可以。

（其他选项，我认为您可以“浮动：中心；”您的视频，然后“清除：两者；”您的标题，或者您可以将您的标题放在视频下方的新 div 中......等等。）

祝你好运。

【讨论】：

【解决方案2】：

您应该考虑包装您的视频元素并使包装器相对定位：

<div class="video-wrapper">
    <video autoplay loop muted poster="screenshot.jpg" id="background">
        <source src="video/work.mp4" type="video/mp4">
    </video>
</div>

.video-wrapper {
    postition: relative;
    height: 100vh;
    width: 100vw;
}
#background {
   position: absolute;
}

您的其余内容应该正常流动。您不需要将上面的代码包装在 Bootstrap 代码中。

【讨论】：