首页 > 解决方案 > 导航未在我的视频集顶部显示为背景

问题描述

所以在我的网站上,我有一个视频集作为背景,我放在视频下面的所有内容都会显示,但顶部的所有内容都不会显示。

索引.php

  <link rel="stylesheet" href="css/index.css">
  <body>

<div class="navigation">
      <a href="blog.php">Updates</a>
              <a href="#">|</a>
      <a href="blog.php">Start</a>
              <a href="#">|</a>
      <a href="blog.php">Login</a>
</div>


<video autoplay muted loop id="background_video">
  <source src="assets/backgrounds/index_background.mp4" type="video/mp4">
</video>

样式.css

 .navigation{
 position: absolute;
 color: white;
 z-index: auto;
 float: none;
 list-style-type: none;
 background-color: white;
 position: fixed;
 }
 #background_video{
 position: fixed;
 right: 0;
 bottom: 0;
 min-width: 100%;
 min-height: 50%;
 z-index: 0;
 }

标签: phphtmlcssstyles

解决方案


问题出在 z-index 上。“.navigation”类的 z-index 必须大于/高于 ID 为“#background_video”的视频元素的 z-index。

而且您不能在“.navigation”类中使用两个“位置”。“绝对”被“固定”覆盖。


推荐阅读