php - 导航未在我的视频集顶部显示为背景
问题描述
所以在我的网站上,我有一个视频集作为背景,我放在视频下面的所有内容都会显示,但顶部的所有内容都不会显示。
索引.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-index 上。“.navigation”类的 z-index 必须大于/高于 ID 为“#background_video”的视频元素的 z-index。
而且您不能在“.navigation”类中使用两个“位置”。“绝对”被“固定”覆盖。
推荐阅读
- python - 列表中日期时间之间的差异
- parsing - 为具有适当优先级(包括括号)的二进制表达式创建语法
- if-statement - 将 IF 条件应用于 3 行并在条件满足时返回另一个单元格的另一个值
- python - Heroku 构建失败并显示“推送被拒绝,无法编译 Python 应用程序”。
- google-apps-script - 在 Google Apps Script 网络应用程序中,得到 redirect_uri_mismatch,但我什至可能不在正确的轨道上
- jakarta-ee - 如何在 WildFly 16 中配置 redshift XADatasource
- postgresql - 如何获取 PostgeSQL 中任何字符的代码点和 utf8 编码
- javascript - HtmlWebpackPlugin 模板不注入变量
- c# - 如何确保用户在 Unity3D 中选择一副牌中的顶牌?
- tableau-api - 如何在有二维的tableau仪表板中过滤信息