我正在创建一个带有导航栏和视频的网站，但是当我向下滚动时，导航栏会保持在其位置，而其内容将位于其下方。我认为这可能是由于Z-index引起的我已经尝试过并且问题仍然存在。如何使 整个 网站内容向下滚动而不会重叠？
<!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;
}
答案 0 :(得分：1)
您的导航栏具有position: fixed属性，即使在滚动时，该导航栏也始终固定在其位置上。删除该属性可能会解决您的问题。