我正在创建一个带有导航栏和视频的网站，但是当我向下滚动时，导航栏停留在它的位置并且内容在它下面。我认为这可能是因为 Z-index 但是我已经尝试过了，问题仍然存在。如何让整个 网页内容向下滚动而不重叠？
HTML
<!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>
CSS
@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;
}
最佳答案
您的导航栏有一个 position: fixed 属性，这使得导航栏始终固定在其位置，即使在滚动时也是如此。删除该属性可能会解决您的问题。
关于html - 向下滚动时视频进入导航栏下方？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51230961/