html - 嵌入式 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

标题和视频的 z-index

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

我已将 0 的 z-index 添加到 .videoWrapper iframe z-index 为 1 到 header我还在您的标题中添加了浅灰色背景，以便您可以更好地查看结果。

什么是 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>