html - 如何在不破坏设计的情况下添加固定的视频背景

Question

我正在从事网站设计工作。在设计中，我尝试使用 position:fixed 在页眉中添加视频背景。但出于某种原因，标题下方的所有元素都在视频顶部结束，从而扰乱了设计。

到目前为止，这是我的代码

index.html

<div class="first_part">
  <header>
    <div class="test">
      <div class="overlay"></div>
      <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
        <source src="{% static 'videos/hero.mp4' %}" type="video/mp4">
      </video>
    </div>
  </header>

  <h1 class='hero_title'>THIS IS THE HEADER</h1>

</div>

<div class="second_part">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

</div>

索引.css

header video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
}

.hero_title {
  color: #F2B705;
  position: absolute;
  top: 30%;
  left: 50%;
  text-align: center;
  font-size: 5em;
  width: 600px;
  height: 50px;
  margin-top: -25px;
  margin-left: -300px;
}

.second_part {
  height: 100%;
  width: 100%;
  background: #ffb347;
  background: -webkit-linear-gradient(to right, #ffb347, #ffcc33);
  background: linear-gradient(to right, #ffb347, #ffcc33);
}

这是视频位置设置为固定时的代码结果。 div 'second_part' 中的元素应该显示在视频下方。

我该怎么做？

Answer 1

当您使用 position: fixed 时，内容会自动放在顶部。如果您想将某些文本移动到另一个位置，您可以使用 position: relative 将固定元素包裹在另一个元素中并设置样式，因为其他内容不会覆盖该元素。

要了解更多关于不同 CSS 位置的信息，请转到 https://www.w3schools.com/css/css_positioning.asp