用纯CSS实现吸顶效果

HTML

<div class="header">

</div>
<nav>
   吸顶的头
</nav>
<div class="content">

</div>
<footer>
    底部
</footer>

CSS

.header {
    
    
	width:100%;
	height:160px;
	background:#87CEEB;
}
nav {
    
    
	width:100%;
	height:100px;
	position:sticky;
	top:0px;
	background:#F98202;
}
.content {
    
    
	width:100%;
	background:blue;
	height:1000px;
}
footer {
    
    
	background:#87CEEB;
}

{
position: static; /默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。/
position: relative; /生成相对定位的元素，相对于其正常位置进行定位。/
position: absolute; /生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。/
position: fixed; /生成绝对定位的元素，相对于浏览器窗口进行定位。/
position: inherit; /规定应该从父元素继承 position 属性的值。/
position: initial; /关键字用于设置 CSS 属性为它的默认值，可作用于任何 CSS 样式。（IE 不支持该关键字）/
position: unset; /关键字我们可以简单理解为不设置。其实，它是关键字 initial 和 inherit 的组合。/
position: sticky; /它可以通过指示偏移量来实现“粘性”/
}

拜