需要帮助在背景视频下添加内容（英雄部分）

Question

这是我第一次在这里提出问题，并且在使用 adobe XD 进行设计后实际上开始从头开始制作我自己的网站。所以基本上我得到了这个带有背景视频和一些文字的英雄部分，我想在下面添加内容，但是当我尝试时，内容一直直接出现在视频前面。我很确定我的代码是错误的，我很抱歉写得不好，但我想理解，这样我才能变得更好。另外，我用法语做网站只是为了不让任何人感到困惑。谢谢！

[现在的网站][1] : https://i.stack.imgur.com/4FdTX.jpg

[我最终想做什么][2] ：https://i.stack.imgur.com/Hp8cN.jpg

    <!--Background video-->
    <section id="hero-video">
        <video autoplay loop muted poster="/Images/cf_poster.jpg">
            <source src="Videos/slideshow.mp4" type="video/mp4">
        </video>
    </section>

<!--Start of header-->
<section class="header">
    <nav>
        <a href="Index.html" id="logo"><img src="Images/cflogo_main.png"></a>
        <div class="nav_links" id="navLinks">
            <i class="fa fa-window-close" onclick="hideMenu()"></i>
            <ul>
        <li><a href="">Le collège</a></li>  
          <li><a href="">Vie scolaire</a></li>
          <li><a href="">Services</a></li>
          <li><a href="">Portail</a></li>
          <li><a href="">Admission</a></li>
        </ul>
        </div>
        <i class="fa fa-bars" onclick="showMenu()"></i>
    </nav>
    <!--End of header-->
    <div class="hero-text">
        <h1>Un grand collège <br> laisse sa marque pour la vie</h1>
        <a href='' class="hero-btn">Visite virtuelle</a>
        </div>
</section>

<!--Section that i want to add under-->
<section class="avantages">
    <h3>Place texte here</h3>
</section>```

CSS

#hero-video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.avantages {
  background: white;
  margin: auto;
  text-align: center;
  padding:1rem;
  position: relative;
}

Answer 1

据我所知，您遇到的问题是您将 hero-video 容器设置为 position: fixed;，这将从正常文档流中删除元素，并且不会为页面布局中的元素。简单来说，这就像在一幅画的顶部添加一个便签。可以看到便利贴，但它不再是绘画的一部分。固定位置几乎可以将元素锁定在屏幕上，并允许您让它浮动。

您应该做的是将视频设置为position: absolute; 并嵌套在设置为position: relative 的父容器中

这个关于“定位”的视频系列确实帮助我理解了这些东西。 DevTips CSS Positioning

这是您正在寻找的一个非常简单的工作版本。

body {
  margin: 0;
}
main section {
  width:100vw;
  height:100vh;
  position:relative;
}

h1 {
  margin:0;
}

video {
  position:absolute;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background: blue;
  z-index:-1;
}

#avantages {
  background: green;
}

<header>
  <!--- header --->
</header>

<main>
  <section id="hero-video">
    <video></video>
    <h1>Content</h1>
  </section>
  <section id="avantages">
    <h1>Content</h1>
  </section>
</main>

Answer 2

将您的视频放在 figure 标签 中，并像这样使用 figcaption 标签 作为标题。

<figure><video autoplay loop muted poster="/Images/cf_poster.jpg">
     <source src="Videos/slideshow.mp4" type="video/mp4"></video>
<figcaption>Add video caption here</figcaption>
</figure>

Answer 3

为了获得文本下的视频并使其全部正确显示，您需要非常擅长使用位置属性和一点点 z-index。我没有给你写一个很长的描述，而是在 CSS 中添加了一些注释。对 HTML 做了一些改动，但没什么大不了的。

.video-container {
  /* positions video based on ancestor */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avantages {
  background: white;
  margin: auto;
  text-align: center;
  padding: 1rem;
  position: relative;
}

.toggle-menu {
  display: none;
}

.header {
  /* header is still in the document this tell advantages section how far down to be */
  height: 100vh;
}

#logo {
  /* just for the example you can delete this */
  border: 1px solid black;
}

.header-nav {
  /* places nav based on ancestor you can use position fixed if you want the links to follow you */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  /* makes sure its above the video */
  z-index: 1;
  /* places logo and links side by side then centers them them spreads them to either side */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  /* places links side by side */
  display: flex;
}

.header-nav ul a {
  /* spaces out links */
  padding: 1rem;
}

.hero-text {
  width: 50%;
  /* positioned relative to its starting position */
  position: relative;
  /* makes sure its above the video */
  z-index: 2;
  /* moves the top left corner to the center */
  top: 50%;
  left: 50%;
  /* moves the moves the object 50% of its own height and width centering it */
  transform: translate(-50%, -50%);
  text-align: center;
  
}

<!--Background video-->



<!--Start of header-->
<header class="header">
  <video class="video-container" autoplay loop muted poster="https://via.placeholder.com/1000">
    <source src="https://www.youtube.com/embed/p6dKMZGB4PE" type="video/mp4">
  </video>
  <nav class="header-nav">
    <a href="Index.html" id="logo"><img src="https://via.placeholder.com/100"></a>
    <div class="nav_links" id="navLinks">
      <i class="fa fa-window-close" onclick="hideMenu()"></i>
      <ul>
        <li><a href="">Le collège</a></li>
        <li><a href="">Vie scolaire</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Portail</a></li>
        <li><a href="">Admission</a></li>
      </ul>
    </div>
    <i class="toggle-menu fa fa-bars" onclick="showMenu()"></i>
  </nav>
  <!--End of header-->
  <div class="hero-text">
    <h1>Un grand collège <br> laisse sa marque pour la vie</h1>
    <a href='' class="hero-btn">Visite virtuelle</a>
  </div>
</header>

<!--Section that i want to add under-->
<section class="avantages">
  <h3>Place texte here</h3>
</section>