我正在尝试确保导航栏和页脚保持固定，我已将两个位置都设置为固定，还尝试将topbar设置为navbar，将bottom：0设置为footer，但是我仍然没有得到想要的结果，我尝试进行操作并调整div的设置以使代码更整洁并使它正常工作，但仍未获得预期的结果。请帮助我。
HTML代码]
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Archers</title>
<link rel="stylesheet" href="arch.css">
</head>
<body>
<section id="main">
<div class="parentDiv " >
<div class=" contentDiv>
<div id=" menu">
<div id="navbar">
<nav>
<ul class="ul-style ">
<li><a href="#portfolio">OUR PORTFOLIO</a></li>
<li><a href="#process">OUR PROCESS</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#main">HOME</a></li>
</ul>
</nav>
</div>
</div>
<div class="mainbg boxshadow"></div>
</div>
</section>
<section id="about" >
<div class="parentDiv ">
<div class=" contentDiv>
<a name=" #about"></a>
</div>
<div class="aboutbg boxshadow"></div>
</div>
</section>
<section id=" process">
<div class="parentDiv ">
<div class=" contentDiv>
<a name=" #process"></a>
</div>
<div class="processbg boxshadow"></div>
</div>
</section>
<section id=" portfolio">
<div class="parentDiv ">
<div class=" contentDiv>
<a name=" #portfolio"></a>
</div>
<div class="portfoliobg boxshadow"></div>
</div>
</section>
<footer>
2020 DeborahPalmTree
</footer>
<script src="index.js" charset="utf-8"></script>
</body>
</html>```
***CSS CODE***
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
}
#navbar {
width: 100%;
height: calc (100% - 58px);
background-color: rgba(219, 219, 219, 1.0);
position: fixed;
}
ul li {
list-style: none;
float: right;
margin: 20px;
}
li a {
text-decoration: none;
color: #ffffff;
}
.bg1 {
background-color: rgba(219, 219, 219, 1.0);
}
.boxshadow {
box-shadow: inset 0px 0px 0px 30px rgba(0,0,0,0.5);
}
.parentDiv {
max-width: 100%;
perspective: 500px;
height: 100%;
}
.mainbg {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(245, 242, 242, 0.44), rgba(255,
255, 255, 0.5)), url('structural-images/img_house_trees.jpg');
background-position: bottom;
background-size: cover;
background-repeat: no-repeat;
}
.aboutbg {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255,
255, 255, 0.5)),url('structural-images/img_construction_site.jpg');
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
}
.processbg {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255,
255, 255, 0.5)),url('structural-images/img_arc_plan.jpg');
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
}
.portfoliobg {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(219, 219, 219, 1.0), rgba(255,
255, 255, 0.5)),url('structural-images/img-structure-garden-car-park.jpg');
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
}
#footer {
position: fixed;
height: 50px;
width: 100%;
background-color: rgba(219, 219, 219, 1.0);
}
请使用z-index，并在您的固定项目上使用溢出属性。
您尚未在页脚中分配任何ID，因此需要在CSS下方应用