html - 视频播放器控件位于导航栏上方

Question

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

.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>

Answer 1

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

例如:

.header { z-指数:3； }

.video-player { z-索引:1； }