我得HTML和css代码已经贴出来了，请问为什么sticky不起作用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css.style/index.css">
</head>
<body>
<div class="header">
<div class="logo">
<img src="images/logo.png">
</div>
<div class="nav">
<ul >
<a href="#">HOME</a>
<a href="#">ABOUT</a>
<a href="#">GALLERY</a>
<a href="#">FACULTY</a>
<a href="#">EVENTS</a>
<a href="#">CONTANT</a>
</ul>
</div>
</div>
<div class="banner">
<!--底层图片-->
<div class="bottom">
<img src="images/banner3.jpg">
</div>
<!--遮罩层-->
<div class="shadelayer"></div>
<!--最上层内容-->
<div class="toptop">
<input type="text" placeholder="your Name"><br>
<input type="text" placeholder="your Phone"><br>
<input type="text" placeholder="your Email"><br>
<textarea name="" id="" cols="30" rows="5" placeholder="Write Your Commnet Here"></textarea><br>
<button>SEND MESSAGE</button>
</div>
</div>
<div class="about">
<div class="top">
<span>ABOUT</span><br>
<hr><br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="middle">
<div class="left">
<div class="p1">
<p>A WORLD ABOUT US</p>
</div>
<div class="p2">
<p>Praesent dignissim viverra est,sed bibendum ligula congue non.Sed ac nislet felis gravida commodo?Suspendisse dliam amet.</p>
<button class="p22">EXPLORE</button>
</div>
</div>
<div class="mid">
<img src="images/bb3.jpg">
</div>
<div class="right">
<div class="box box1">
<p class="number">70000</p>
<hr>
<span class="text">Student</span>
</div>
<div class="box box2">
<p class="number">600</p>
<hr>
<span class="text">Faculty</span>
</div>
</div>
</div>
<div class="bottom">
<div class="pic1">
<img src="images/b1.jpg">
</div>
<div class="pic2">
<p class="pp1">Library</p>
<p class="pp2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="pp3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<button class="pp4">EXPLORE</button>
</div>
<div class="pic1">
<img src="images/b2.jpg" alt="">
</div>
<div class="pic2">
<p class="pp1">Computer Lab</p>
<p class="pp2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="pp3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<button class="pp4">EXPLORE</button>
</div>
<div class="pic2">
<p class="pp1">Conference Hall</p>
<p class="pp2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="pp3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<button class="pp4">EXPLORE</button>
</div>
<div class="pic1">
<img src="images/b3.jpg" alt="">
</div>
<div class="pic2">
<p class="pp1">Play Ground</p>
<p class="pp2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="pp3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<button class="pp4">EXPLORE</button>
</div>
<div class="pic1">
<img src="images/b4.jpg" alt="">
</div>
</div>
</div>
<div class="gallery">
<div class="top">
<p>GALLERY</p>
<hr>
<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</span>
</div>
<div class="container">
<div class="h1">
<img src="images/03-01.jpg"><p>SCIENCE LAB</p>
</div>
<div class="h1">
<img src="images/03-02.jpg"><p>INDOOR STANDIUM</p>
</div>
<div class="h1">
<img src="images/03-03.jpg"><p>TRANSPORTATION</p>
</div>
<div class="h1">
<img src="images/03-04.jpg"><p>KIDS ROOM</p>
</div>
<div class="h1">
<img src="images/03-05.jpg"><p>MEDITATION CLASSES</p>
</div>
<div class="h1">
<img src="images/03-06.jpg"><p>KIDS PLAY GROUND</p>
</div>
</div>
</div>
<div class="footer">
<p>©2016 imooc.com 京ICP备13046642号</p>
</div>
</body>
</html>
*{
padding: 0;
margin:0;
}
.header{
width: 100%px;
height: 100px;
background: #07abc9;
position: sticky;
z-index: 10;
}
.header .logo{
float: left;
}
.header img{
width: 300px;
height: 85px;
padding-top: 8px;
padding-left: 50px;
}
.header .nav{
float: right;
}
.header .nav ul{
margin-right: 40px;
}
.header .nav ul a{
float: left;
margin-right:20px;
line-height: 100px;
font-size: 15px;
font-weight: bolder;
color: white;
text-decoration: none;
}
.header .nav ul a:hover{
background-color: black;
}
.banner .bottom{
width:100%;
height: 600px;
}
.banner .bottom img{
width:100%;
height: 600px;
}
.banner .shadelayer{
position: absolute;
width: 100%;
height: 600px;
top: 100px;
left: 0;
background-color: #000;
opacity: 0.5;
}
.banner .toptop{
text-align: center;
position: absolute;
top:200px;
width:600px;
height: 400px;
right: 50%;
margin-right: -300px;
z-index: 2;
}
.banner .toptop input{
width:400px;
height: 35px;
margin-top: 30px;
font-family: "Microsoft YaHei";
font-size: 15px;
border: 2px solid gray;
background-color: transparent;
}
.banner .toptop input:hover{
border: 2px solid #07cbc9;
}
.banner .toptop textarea{
margin-top: 30px;
width:400px;
height: 120px;
font-family: "Microsoft YaHei";
font-size: 15px;
border: 2px solid gray;
background-color: transparent;
}
.banner .toptop textarea:hover{
border: 2px solid #07cbc9;
}
.banner .toptop button{
width: 200px;
height: 45px;
margin-top: 30px;
font-family: "Microsoft YaHei";
font-size: 15px;
border: 2px solid gray;
background-color: transparent;
color: gray;
}
.banner .toptop button:hover{
border: none;
background-color: #07cbc9;
}
.about{
position: relative;
width: 100%;
height: 1550px;
}
.about .top{
position: absolute;
text-align: center;
background-color: white;
width:500px;
height: 200px;
margin-left: 550px;
float: left;
}
.about .top span{
font-size: 40px;
font-family: "Microsoft YaHei";
font-weight: bolder;
}
.about .top p{
font-size:15px;
font-family: "Microsoft YaHei";
color: gray;
}
.about .top hr{
width: 50px;
height: 3px;
background-color: #07abc9;
margin-left: 225px;
margin-top: 20px;
border: none;
}
.about .middle{
position: absolute;
background-color: white;
width:100%;
height: 600px;
top: 200px;
float: left;
margin-left: 300px;
}
.middle .left{
float: left;
width: 400px;
height: 300px;
}
.about .middle .left .p1{
width: 220px;
text-align: center;
}
.about .middle .left .p1 p{
font-size:35px;
font-family: "Microsoft YaHei";
}
.about .middle .left .p2{
position: absolute;
width: 300px;
height: 200px;
border: 2px solid gray;
background-color: rgba(255,255,255,0.4);
padding: 20px 10px;
z-index: 9;
line-height: 30px;
}
.about .middle .left .p2 p{
font-size:15px;
font-family: "Microsoft YaHei";
text-align: left;
}
.about .middle .left .p2 button{
font-size:15px;
width: 100px;
height: 40px;
font-family: "Microsoft YaHei";
color: white;
background-color: black;
margin-top: 20px;
margin-left: 0;
}
.about .middle .left .p2 button:hover{
background-color: transparent;
border: 2px solid black;
color: black;
}
.about .middle .mid{
float: left;
position: absolute;
top: 0px;
left: 220px;
z-index: 1;
}
.about .middle .mid img{
z-index: 1;
width: 600px;
height: 400px;
}
.about .middle .right{
width: 300px;
height: 400px;
position: absolute;
top: 0;
float: left;
left: 830px;
text-align: center;
}
.about .middle .right .box{
border: 2px solid #07abc9;
width: 250px;
height: 150px;
margin-bottom: 20px;
}
.about .middle .right hr{
width: 30px;
height: 2px;
background-color: #07abc9;
margin: 0 auto;
border: none;
}
.about .middle .right p{
margin-top: 10px;
font-family: "Microsoft YaHei";
font-size: 35px;
font-weight: bolder;
line-height: 70px;
}
.about .middle .right span{
font-family: "Microsoft YaHei";
font-size: 20px;
line-height: 60px;
}
.about .bottom{
position: absolute;
width:100%;
height: 800px;
top: 700px;
left: 0px;
float: left;
}
.about .bottom .pic1{
width:25%;
height: 400px;
float: left;
background-color: #07abc9;
}
.about .bottom .pic2{
width:25%;
height: 400px;
float: left;
background-color: #07abc9;
}
.about .bottom img{
width:380px;
height: 400px;
}
.about .bottom .pp1{
font-size: 35px;
margin-bottom: 30px;
margin-top: 30px;
color: white;
}
.about .bottom .pp2{
font-size: 20px;
margin-bottom: 30px;
color: white;
}
.about .bottom .pp3{
font-size: 15px;
margin-bottom: 30px;
color: white;
}
.about .bottom .pic2 button{
background-color: black;
color: white;
border: none;
width:90px;
height: 45px;
margin-left: 140px;
}
.about .bottom .pic2 button:hover{
background-color: transparent;
border: 2px solid black;
}
.gallery{
width: 100%;
height: 980px;
position: relative;
}
.gallery .top{
position: absolute;
width: 540px;
height: 200px;
text-align: center;
top:0;
left: 50%;
margin-left: -270px;
float: left;
}
.gallery .top p{
font-size: 50px;
font-family: "Microsoft YaHei";
margin-bottom: 15px;
font-weight: bolder;
}
.gallery .top hr{
width: 30px;
height: 2px;
background-color: #07abc9;
margin: 0 auto;
border: none;
margin-bottom: 15px;
}
.gallery .top span{
line-height: 20px;
color: gray;
}
.gallery .container{
position: absolute;
width:1200px;
height: 780px;
left: 50%;
margin-left: -600px;
float: left;
top:200px;
}
.gallery .container .h1{
width:350px;
height: 350px;
float: left;
margin-left: 20px;
background-color: black;
color: white;
margin-bottom: 20px;
line-height: 30px;
}
.gallery .container p{
margin-left: 15px;
}
.gallery .container img{
width:350px;
height: 300px;
}
.footer{
width: 100%;
height: 70px;
background-color: #07abc9;
position: relative;
text-align: center;
line-height: 70px;
color: white;
}
还有我的about区下面部分，图片和块相间时，显示的不太正常，有溢出
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10205 个
如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星