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>
sticky定位:他不会脱离文档流,下面的内容不会覆盖他的位置。
<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>