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!
.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;
z-index: 5;
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>
推荐阅读
- java - 读取输出时如何处理 Java Processes 的孙子?
- html - 输入字段设置为响应式
- javascript - 使用 css 自定义 bot 框架直线 API
- c# - 如何使用 Open XML SDK 在 Word 表格的空单元格中设置字体大小?
- angular - Angular 6:将数据保存到本地存储
- kubernetes - Prometheus 中 pod 内存利用率的自定义警报
- c# - 是否有任何可用于 Visual Studio 2017 的开放式封面工具或扩展?
- c++ - 在 Fedora 28 下使用 Eclipse CDT 中的 Clang
- r - 用 kable 或 DT 将标题固定在顶部
- javascript - 获取 thingsboard 小部件上的所有资产名称