fixed定位:他会脱离文档流,下面的内容会覆盖他头部的位置,导致重叠。
<body>
<header>头部</header></header>
<main>
<div>主体内容</div>
<div>主体内容</div>
</main>
</body>
<style>
*{
margin:0;
padding:0;
}
header{
position: fixed;
top: 0;
background-color: #fff;
}
main{
height: 1000px
}
</style>
![](https://i-blog.csdnimg.cn/blog_migrate/eea8d79eff613aadc6adce3285122281.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2c62e5ef6164bbe7c766cc68b88bda02.png)
sticky定位:他不会脱离文档流,下面的内容不会覆盖他的位置。
![](https://i-blog.csdnimg.cn/blog_migrate/10a7723669f37e629b7ea32ddb7af0ab.png)
<body>
<div class="box">标题一</div>
<main>内容</main>
<div class="box">标题二</div>
<main>内容</main>
<div class="box">标题三</div>
<main>内容</main>
</body>
<style>
*{
margin:0;
padding:0;
}
.box{
position: sticky;
top:0;
background-color: blue;
height: 50px;
}
main{
height: 800px;
}
</style>
![](https://i-blog.csdnimg.cn/blog_migrate/825b93102aac0d2cba8797e8d0c23b11.gif)