Блог

Главная - Вопросы по программированию - Элементы управления видеопроигрывателем расположены поверх панели навигации

Элементы управления видеопроигрывателем расположены поверх панели навигации

#html #css

#HTML #css

Вопрос:

Итак, у меня есть этот сайт, где у меня есть липкий заголовок. Этот сайт также содержит видео. Когда я прокручиваю вниз и просматриваю видео, элементы управления видео отображаются поверх заголовка. Поэтому я хочу, чтобы заголовок был поверх элементов управления видео.

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

Ответ №1:

Вы можете исправить это с помощью атрибута CSS z-index. Присвоите заголовку более высокий z-индекс, чем у видеопроигрывателя, и он появится поверх него.

Так, например:

.header {
z-index: 3;
}

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

Ответ №2:

Тогда дайте ему более высокий z-индекс!

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

Ответ №3:

Попробуйте присвоить вашему классу заголовка z-индекс следующим образом:

     z-index: 1;

Ответ №4:

Вам не хватает z-index свойства для .header . Причина, по которой ваш заголовок скрывается за видеоплеером, заключается в том, что он использует позицию, отличную от статической (например, абсолютной, относительной, фиксированной), поэтому теперь он может быть «многоуровневым», и вам нужно указать браузеру, где он должен быть.

Дополнительная информация https://css-tricks.com/almanac/properties/z/z-index /

Это ваш пример работы https://codepen.io/coliveravenegas/pen/XQMzVb