0

我有一个下拉导航栏，position: sticky我有一个视频元素。在横向模式下向下滚动时，导航栏应该覆盖视频，确实如此，但默认播放按钮仍显示在导航栏上，无论如何，当导航栏链接出现在视频元素上时，它们是不可点击的。它在其他浏览器上运行良好。

我发现了一些使用z-index可能会有所帮助的建议，但问题仍然存在

下面是一些例子：

nav ul {
  list-style-type: none;
  margin: 0;
  background-color: #480607;
  overflow: hidden;
  width: 100%;
}

nav ul li {
  float: left;
}

nav ul li a {
  color: white;
  padding: 20px 40px;
  text-decoration: none;
  display: block;
}

nav ul li a.active {
  background-color: #160000;
}

nav ul li a:hover:not(.active) {
  background-color: #4f4f4f;
}

h1 {
    margin: 2px;
}

header {
text-align: center;
background-color: #160000;
margin: -2px;
align-self: start;
color: white;
}

#sticky{
position: sticky;
top: 0;
z-index: 1;
}

nav {
  align-self: start;
}

nav img {
  display: none;
}
video{
z-index: 0;
}

/*smartphone*/

@media screen and (max-width: 600px) and (orientation: portrait) {
  ul {
    display: none;
  }
  nav img {
    display: block;
    width: 30px;
    position: fixed;
    top: 0;
  }
  nav:hover ul {
    display: block;
  }
  main {
    grid-template-columns: 1fr;
    grid-template-areas: 'greeting' 'text' 'media';
  }
  iframe,
  video {
    width: 70vw;
    height: 39.354vw;
  }
}
<div id="sticky">
  <header>
    <h1>some header</h1>
  </header>
  <nav>
    <img id="menu_icon" src="media/menu.png" alt="menu icon" />
    <ul>
      <li><a class="active" href="index.html">first</a></li>
      <li><a href="tortenet.html">second</a></li>
      <li><a href="targyak.html">third</a></li>
      <li><a href="elovilag.html">fourth</a></li>
    </ul>

  </nav>
</div>
<main>
  <section id="media">
    <figure>
      <video width="560" controls="controls">
                        <source src="media/short_gameplay.mp4" type="video/mp4" />
                        Nem működik a lejátszó?
                        <a href="media/short_gameplay.mp4">töltsd le a videót</a>
                    </video>
      <figcaption>Az első lépések</figcaption>
    </figure>
  </section>
</main>

感谢您阅读所有这些内容！

4

1 回答 1

0

毕竟z-index是解决方案，但正如@CBroe所说，它仅适用于position: relative. 所以正确的css应该是这样的

video{
    position: relative;
    z-index: 0;
}
#sticky{
    position: sticky;
    top: 0;
    z-index: 1;
}
于 2021-12-03T00:46:27.000 回答