Realize the ceiling effect with pure 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;
}

{ / Default value. No positioning elements appear in the normal stream (ignored or statement). / / Generating element relative positioning, positioning relative to its normal position. / / Generate an absolute positioning element with respect to the first positioning element other than a parent positioning. / / Generate absolute positioning of elements relative to the browser window positioning. / / Provisions should be inherited from the parent element value of the property. / / Keyword is used to set the attribute to its default value, it may be applied to any style. (IE does not support this keyword) / / keywords we can simply be understood as not set. In fact, it is the keywords and combinations. / / It can be implemented "sticky" by indicating the offset / }
position: static;top, bottom, left, rightz-index
position: relative;
position: absolute;static
position: fixed;
position: inherit;position
position: initial;CSSCSS
position: unset;initialinherit
position: sticky;

worship