html - 视频播放器控件越过导航栏

所以我有这个网站，我有一个粘性标题。该站点还包含一个视频。当我向下滚动并浏览视频时，视频控件位于标题顶部。所以我希望标题位于视频控件之上。

.header {
 padding: none;
 font-size: 20px;
 color: #FFFFFF;
 /*border: 1px dashed orange;*/
 position: fixed;
 height: 90px;
 width: 100%;
 text-align: center;
 background-color: #005a84;

 overflow: hidden;
 top: 0;

 list-style-type: none;
}

<div class="header">
<div>
    <li href="#top"><img src="act_logo.png"></li>
    <!--<li><a><input type="image" src="act_logo.pnt" name="" id=""></a></li>-->
    <li><a href="#description">Description</a></li>
    <li><a href="#video">Video</a></li>
    <li><a href="#explication">Explication</a></li>
    <li><a href="#top">Top</a></li>
</div>
</div>
<br><br><br><br><br><br><br>
<div id="page2">
<a id="video" class="smooth"></a>
<br><br><br><br>
<h2 class="a">Video explicatif</h2>
<video width="700" height="400" controls>
    <source src="FondationAct1.mp4" type="video/mp4">
    <source src="FondationAct1.mp4" type="video/ogg">
    Your browser does not support the video tag.
</video>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

最佳答案

您可以使用 z-index css 属性修复此问题。给标题一个比视频播放器更高的 z-index，它会出现在它上面。

例如:
.header { z-index: 3;}.video-player { z-index: 1;}

关于html - 视频播放器控件越过导航栏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55613916/