所以在我的网站上,我有一个视频设置为背景,我放在视频显示下面的所有内容,但顶部的所有内容都不会显示。
索引.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;
}
问题出在 z 索引上。 ".navigation"类的 z 索引必须大于/高于 ID 为"#background_video"的视频元素的 z 索引。
并且您不能在".navigation"类中使用两个"位置"。"绝对"被"固定"覆盖。