<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.header,.nav,.main,.footer{
border: 2px solid #000;
margin: 5px;
}
.header{
height: 200px;
}
.nav{
/* 设置盒子 根据浏览器顶部边缘，多少时，开始吸顶 */
position: sticky;
/* 距离顶部多少开始吸顶 */
top: 0;
background-color: orange;
z-index: 999;
}
</style>
</head>
<body>
<!--
1 position(默认)
2fixed;固定定位
3absolute 绝对定位
4 relative 相对定位
5sticky 粘性定位(吸顶效果)（兼容性，目前大部分场景，通过js模式效果实现的）
-->
<div class="header">
<p>这是头部</p>
<p>这是头部</p>
<p>这是头部</p>
</div>
<div class="nav">
<p>导航</p>
<p>导航</p>
<p>导航</p>
</div>
<div class=" main">
<p>我是主题1</p>
<p>我是主题2</p>
<p>我是主题3</p>
<p>我是主题4</p>
<p>我是主题5</p>
<p>我是主题6</p>
<p>我是主题7</p>
<p>我是主题8</p>
<p>我是主题9</p>
<p>我是主题10</p>
<p>我是主题11</p>
<p>我是主题12</p>
<p>我是主题13</p>
<p>我是主题14</p>
<p>我是主题15</p>
<p>我是主题16</p>
<p>我是主题17</p>
<p>我是主题18</p>
<p>我是主题19</p>
<p>我是主题20</p>
<p>我是主题21</p>
<p>我是主题22</p>
<p>我是主题23</p>
<p>我是主题24</p>
<p>我是主题25</p>
<p>我是主题26</p>
<p>我是主题27</p>
<p>我是主题28</p>
<p>我是主题29</p>
<p>我是主题30</p>
</div>
<div class="footer">
<p>我是底部</p>
<p>我是底部</p>
<p>我是底部</p>
</div>
</body>
</html>
