Html 向下滚动时，视频会进入导航栏？
我正在创建一个带有导航条和视频的网站，但是当我向下滚动导航条时，导航条保持在其位置，内容位于导航条下方。我认为这可能是因为Html 向下滚动时，视频会进入导航栏？,html,css,Html,Css,我正在创建一个带有导航条和视频的网站，但是当我向下滚动导航条时，导航条保持在其位置，内容位于导航条下方。我认为这可能是因为Z-index，但我尝试了，问题仍然存在。如何使整个web内容向下滚动而不重叠 HTML 您的导航栏有一个position:fixed属性，该属性使导航栏始终固定在其位置，即使在滚动时也是如此。删除该属性可能会解决您的问题。我将其更改为position:relative，它开始工作 <!doctype html> <html> <head>
Z-index您的导航栏有一个
position:fixed<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>About us</title>
<link rel="stylesheet" href="About.css">
</head>
<body>
<nav>
<div class="banner animated"><img class="hero-image" src="https://picsum.photos/1080/200/?random"></div>
<div class="nav-bar"> <label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<div style="padding-top:350px;" align="center" >
<video width="1000" controls style="z-index: -2;">
<source src="../../../Documents/Unnamed Site 2/Boku no Hero Academia AMV - Till I Collapse.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<p> dummy text dummy text dummy text dummy text dummy text dummy text
dummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy text dummy text dummy text dummy text dummy text dummy text
dummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy text dummy text dummy text dummy text dummy text dummy text
dummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy text dummy text dummy text dummy text dummy text dummy text
dummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy text
dummy textdummy textdummy textdummy textdummy textdummy textdummy text </p>
</body>
</html>
@import 'https://fonts.googleapis.com/css?family=Work+Sans:400,500,900';
body {
margin: 0px 0px 0px 0px;
}
nav {
position: fixed;
width: 100%;
transition: top 0.2s ease-out;
}
.banner {
text-align: center;
width: 100%;
box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.13);
}
nav ul#menu {
padding-left: 0;
display: flex;
}
nav ul li {
flex-grow: 1;
}
.nav-bar {
/* Rectangle 1: */
background: #FFFFFF;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.11), 0px 4px 6px 0px rgba(0, 0, 0, 0.11);
width: 100%;
text-align: center;
}
//-------------------------------------------------------
/*Strip the ul of padding and list styling*/
ul {
list-style-type: none;
margin: 0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display: inline-block;
}
/*Style for menu links*/
li a {
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
}
/*Display the dropdown on hover*/
ul li a:hover+.hidden,
.hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding-left: 0px;
padding-right: 0px;
display: none;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked~#menu {
display: block;
}
/*Responsive Styles*/
@media screen and (max-width: 760px) {
/*Make dropdown links appear inline*/
nav ul#menu {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 0px;
}
/*Make all menu links full width*/
ul li,
li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
}
.hero-image {
/* The image used */
/* Set a specific height */
height: 50%;
width: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
vertical-align: top;
}
#menu {
margin: 0;
}