滚动时，嵌入式iframe视频与固定的导航栏重叠

Question

我是编程的完整入门者。当前在产品着陆页上工作。我使用iframe嵌入了youtube上的视频，并将导航栏固定在顶部。向下滚动时，视频在导航栏上滑动。如何使视频像其他页面内容一样向下滚动到导航栏？

这是HTML文件的代码：          

    <div class="logo">
      <img id="header-img" src="http://www.logodust.com/img/free/logo2.png" alt="Company Logo" title="comapany logo">
      <h1>
        Pilot - Capless Since 1984
      </h1>
    </div>

    <div class="menu">
      <ul>
        <li>
          <a class="nav-link" href="#container">Home</a>
        </li>
        <li>
          <a class="nav-link" href="#aboutUs">About Us</a>
        </li>
        <li>
          <a class="nav-link" href="#products">Products</a>
        </li>
        <li>
          <a class="nav-link" href="#contact-info">Contact Us</a>
        </li>
      </ul>
    </div>
  </nav>

</header>

<div class="container">

  <section class="videoWrapper">
    <iframe id="video" width="600" height="340" src="https://www.youtube.com/embed/l__LJ8NF6eQ" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen ></iframe>
      </section>
</div>

导航栏的CSS代码：

#header {
  position: fixed;
  top: 0;
  left: 0;
  margin: auto;
  width: 100%;
}

#nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #05386B;
  color: #EDF5E1;
}

.logo {
  margin-left: 25px;
}

.logo #header-img {
  float: left;
  width: 50px;
  height: 50px;
}

.logo h1 {
  font-family: 'Pacifico', cursive;
  font-size: 30px;
  float: right;
  position: relative;
  top: 5px;
  left: 10px;
}

.menu {
  display: flex;
  align-items: center;
}

.menu ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.menu li {
  padding: 15px;
  margin-right: 30px;
  font-size: 25px;
}

iframe的CSS代码：

.videoWrapper {
  position: relative;
  padding-bottom: 35%;
  height: 0;
  padding-top: 20px;
  overflow: hidden;
}

.videoWrapper iframe {
  border: 5px solid #05386B;
  position: absolute;
  top: 5em;
  bottom: 2em;
  left: 0;
  right: 0;
  margin: auto;
}

预先感谢

Answer 1

在CSS中，添加z-index属性。 Here是此财产的参考。

#header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  margin: auto;
  width: 100%;
}

Answer 2

标头和视频的z-index

您在上面的代码中缺少代码<header>。另外，标题没有ID，因为它不存在，因此我添加了缺少的代码，并将标题样式添加为CSS HTML元素header。

我在.videoWrapper iframe上添加了0的z索引，在header上添加了1的z索引。我还为标题添加了浅灰色背景，以便更好地查看结果。

什么是z-index？

z-index是确定HTML框模型中图层顺序的方式。数字越高，顶部越高。

---

希望这对您的项目有帮助并祝您好运：）

    <style>
header {
  position: fixed;
  top: 0;
  left: 0;
  margin: auto;
  width: 100%;
  z-index:1;
  background:#ddd;
}

#nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #05386B;
  color: #EDF5E1;
}

.logo {
  margin-left: 25px;
}

.logo #header-img {
  float: left;
  width: 50px;
  height: 50px;
}

.logo h1 {
  font-family: 'Pacifico', cursive;
  font-size: 30px;
  float: right;
  position: relative;
  top: 5px;
  left: 10px;
}

.menu {
  display: flex;
  align-items: center;
}

.menu ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.menu li {
  padding: 15px;
  margin-right: 30px;
  font-size: 25px;
}
.videoWrapper {
  position: relative;
  padding-bottom: 35%;
  height: 0;
  padding-top: 20px;
  overflow: hidden;
}

.videoWrapper iframe {
  border: 5px solid #05386B;
  position: absolute;
  top: 5em;
  bottom: 2em;
  left: 0;
  right: 0;
  margin: auto;
  z-index:0;
}

    </style>
<header>    
    <div class="logo">
      <img id="header-img" src="http://www.logodust.com/img/free/logo2.png" alt="Company Logo" title="comapany logo">
      <h1>
        Pilot - Capless Since 1984
      </h1>
    </div>

    <div class="menu">
      <ul>
        <li>
          <a class="nav-link" href="#container">Home</a>
        </li>
        <li>
          <a class="nav-link" href="#aboutUs">About Us</a>
        </li>
        <li>
          <a class="nav-link" href="#products">Products</a>
        </li>
        <li>
          <a class="nav-link" href="#contact-info">Contact Us</a>
        </li>
      </ul>
    </div>
  </nav>

</header>

<div class="container">

  <section class="videoWrapper">
    <iframe id="video" width="600" height="340" src="https://www.youtube.com/embed/l__LJ8NF6eQ" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen ></iframe>
      </section>
</div>