Question

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

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

out = new PrintWriter(clientSocket.getOutputStream(), true);
in = new BufferedReader(new 
InputStreamReader(clientSocket.getInputStream(), "UTF-8"));
String inputLine;

while ((inputLine = in.readLine()) != null) { // Wait for data
    Log.debug(inputLine); // It is what get printed in the exemple
    String[] processedInput = processInput(inputLine);
    onDataReceived(processedInput);
}

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

Answer 2

尝试像这样为标头类提供z-index：

    z-index: 1;

Answer 3

您可以使用z-index css属性解决此问题。为标题设置比视频播放器更高的z-index，它会显示在其顶部。

例如：

.header { z-index: 3; }

.video-player { z-index: 1; }

Answer 4

您缺少z-index的{{1}}属性。您的标头隐藏在视频播放器后面的原因是，由于标头使用的位置与静态位置不同（例如，绝对，相对，固定），因此现在可以“分层”了，您需要告诉浏览器应该在哪里。

更多信息https://css-tricks.com/almanac/properties/z/z-index/

这是您工作https://codepen.io/coliveravenegas/pen/XQMzVb

的示例

视频播放器控件移到导航栏上

4 个答案: