一.固定定位
position:fixed开启了元素的固定定位
固定定位的特点:
（1）用于固定在浏览器页面上，不随浏览器的滚动而改变位置；
（2）以浏览器为参照物，和父元素没有任何关系；
（3）固定定位不占有原来的位置，即脱离标准流 ，更改元素的性质
应用场景
1.固定导航
2.固定侧边栏
3.广告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
body{
height: 3000px;
}
.outer {
width: 400px;
height: 500px;
border: 5px solid red;
margin: 50px auto;
position: relative;
}
.box1 {
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body >
<div class="outer">
<div class="box1"></div>
<p>
近日，人民日报社原副总编辑梁衡以著作权遭受侵权为由，委托代理公司起诉《中国学术期刊（光盘版）》电子杂志社有限公司（系“中国知网”运营方），该案已于8月2日在宁波市海曙区人民法院立案。
据梁衡的委托诉讼代理人透露，此次诉讼涉案文章共20篇，诉讼请求包括：立即停止侵权；赔偿经济损失及合理开支30余万元。“这个赔偿金额是基于梁衡的社会影响力、文章扩散程度、侵权范围、侵权持续时间及诉讼成本等多种因素的综合考量。”
此前，2021年12月和今年4月，89岁的中南财经政法大学退休教授赵德馨和山东女作家唐效英先后状告知网维权。梁衡这次起诉引人注目。梁衡是大家所熟知的公众人物，曾任国家新闻出版署副署长、人民日报社副总编辑，是学者、记者，作品多次入选大、中、小学教材。
</p>
</div>
</body>
</html>未开启定位时,box1固定在方框的左上角 开启定位后,box固定在页面视图的位置,不随着页面 滑动而变化
二.粘滞定位
position:sticky开启粘滞定位
粘滞定位特点:
（1）以浏览器为参照物（体现固定定位特点）；
（2）占有原来位置（体现相对定位特点）,不会脱离文档流，元素性质也不会发生变化；
（3）粘滞定位可以在元素到达某个位置时，将其固定
（4）配合top值设置，没有达到top值之前正常显示，随着滚动条滚动而滚动，
达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>导航条</title>
<style>
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}
ul{
width: 600px;
height: 50px;
background-color: pink;
margin: 100px auto 0px;
line-height: 50px;
text-align: center;
/* 设置粘滞定位 */
/* position: sticky;
top: 0; */
}
ul>li{
float: left;
width:25% ;
}
ul>li:hover{
background-color: #ccc;
color: white;
}
</style>
</head>
<body style="height: 3000px;">
<div>
<!-- 创建导航条的结构 -->
<ul>
<li>导航</li>
<li>导航</li>
<li>导航</li>
<li>导航</li>
</ul>
<!-- 内容 -->
<div>
近日，人民日报社原副总编辑梁衡以著作权遭受侵权为由，委托代理公司起诉《中国学术期刊（光盘版）》电子杂志社有限公司（系“中国知网”运营方），该案已于8月2日在宁波市海曙区人民法院立案。
据梁衡的委托诉讼代理人透露，此次诉讼涉案文章共20篇，诉讼请求包括：立即停止侵权；赔偿经济损失及合理开支30余万元。“这个赔偿金额是基于梁衡的社会影响力、文章扩散程度、侵权范围、侵权持续时间及诉讼成本等多种因素的综合考量。”
此前，2021年12月和今年4月，89岁的中南财经政法大学退休教授赵德馨和山东女作家唐效英先后状告知网维权。梁衡这次起诉引人注目。梁衡是大家所熟知的公众人物，曾任国家新闻出版署副署长、人民日报社副总编辑，是学者、记者，作品多次入选大、中、小学教材。
</div>
</div>
</body>
</html>未设置粘滞定位时,导航栏位置不移动 设置粘滞定位后,未达到指定位置时,导航不移动
达到设定位置后,随着滚动条移动而固定在页面的某个位置
本文含有隐藏内容，请 开通VIP 后查看