老师为什么我这样设置，顶部header不能固定住，我已经用了position: sticky

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>作业2-9</title>
<link rel="stylesheet" href="css/pj.css">
</head>

<body>
<!--顶部-->
<div class="header">
<div class="logo"><a href="#"><img src="images/logo.png" alt="logo"></a></div>
<div class="nav">
<a href="#">
<div>HOME</div>
</a>
<a href="#">
<div>ABOUT</div>
</a>
<a href="#">
<div>GALLERY</div>
</a>
<a href="#">
<div>FACULTY</div>
</a>
<a href="#">
<div>EVENTS</div>
</a>
<a href="#">
<div>CONTACT</div>
</a>
</div>
</div>
<!--banner图-->
<div class="banner">
<div class="bannerPic">
<img src="images/banner3.jpg" alt="bannerPic">
</div>
<!--遮罩层-->
<div class="zhezhao"></div>
<div class="bannerForm">
<form>
<div class="name"><input type="text" placeholder="your Name"></div>
<div class="phone"> <input type="text" placeholder="your Phone"></div>
<div class="email"><input type="email" placeholder="your Email"></div>
<div class="textarea"><textarea cols="61" rows="6" placeholder=" Write Your Comment Here"></textarea>
</div>
<div class="button"><button type="submit" style="width: 140px;height: 40px;">SEND MESSAGE</button></div>
</form>
</div>

</div>
<!-- about区-->
<div class="about">
<div class="top">
<h2>ABOUT</h2>
</div>
</div>
</body>

</html>

*{
padding: 0;
margin: 0;
}
.header{
width: 100%;
height: 100px;
background-color: #07cbc9;
position: sticky;
top: 0;
}
.header .logo{
width: 260px;
height: 48px;
float: left;
margin-top: 20px;
margin-left: 30px;
}
.header .logo img{
width: 260px;
height: 48px;
}
.header .nav{
float: right;
margin-right: 20px;
}
.header .nav a{
text-decoration: none;
float: left;
}
.header .nav a:hover div{
background-color: black;
}
.header .nav a div{
height: 70px;
width: 100px;
text-align: center;
padding-top: 30px;
padding-bottom: 0;
color: #ffffff;
font-family: "微软雅黑";
}
.banner{
width: 100%;
height: 800px;
position: relative;
float: left;
overflow: hidden;
}
.banner .bannerPic img{
width: 100%;
height: 800px;
}
.banner .zhezhao{
width: 100%;
height: 800px;
position: absolute;
float: left;
top: 0;
left: 0;
background-color: black;
opacity: 0.5;
z-index: 1;
}
.banner .bannerForm{
width: 100%;
height: 800px;
position: absolute;
float: left;
left: 50%;
top: 400px;
z-index: 3;
}
.banner .bannerForm form{
margin-top: -200px;
margin-left: -200px;
}
.banner .bannerForm form div {
margin: 20px;
}
.banner .bannerForm form div input{
background: transparent;
width: 450px;
height: 30px;
border: 2px solid white;
color: #ffffff;
padding-left: 5px;
}
.banner .bannerForm form div ::-webkit-input-placeholder{
color: #ffffff;
}
.banner .bannerForm form div:hover input{
border: 2px solid #07cbc9;
}
.banner .bannerForm form div:hover textarea{
border: 2px solid #07cbc9;
}
.banner .bannerForm form div:hover  button{
border: 2px none #07cbc9;
background-color: #07cbc9;
}
.banner .bannerForm form div textarea{
background: transparent;
font-family: "微软雅黑";
border: 2px solid white;
width: 450px;
color:#ffffff;
resize:none;
padding-top: 5px;
padding-left: 3px;
}
.banner .bannerForm form .button button{
background: transparent;
margin-left: 150px;
border: 2px solid white;
color:#ffffff;
}
.about{
width: 100%;
height: auto;
}
.about .top {
width: 100%;
height: 500px;
float: left;
background-color: #ffffff;
}

请问这是为什么呢？