固定定位概念
固定定位是绝对定位的子类别，一个设置固定定位的元素是相对于视窗固定的，就算页面文档发生了滚动，它也会一直待在相同的地方。
固定定位代码添加：position : fixed
水平方向：left right
垂直方向：top bottom
注：1. 两个方向各选一个参数即可定位；
2. 定位的数值可以为负数
3. 每个设置了固定定位的盒子，都会有专属的浮层，有几个固定定位的盒子，就有几个浮层。
固定定位示例一
没有进行盒子固定定位前的盒子排列
为了对固定定位演示更加清晰，将盒子3进行固定定位
<style>
div{
/* 给所有div盒子进行宽和高的定值 */
width: 200px;
height: 200px;
background-color: gray;
margin-bottom: 5px;
}
#div3{
/* 背景色为红色 */
background-color: red;
/* 下外边距5px */
margin-bottom: 5px;
/* 进行固定定位 */
position: fixed;
/* 向左偏移至距离浏览器窗口顶端208px */
left: 208px;
/* 垂直向上偏移至距离浏览器窗口顶端70px */
top: 70px;
}
</style>
<body>
<div>1</div>
<div>2</div>
<div id="div3">3</div>
<div>4</div>
</body>调整页面高度，滚动进度条后，盒子3的位置
我们通过盒子的固定定位示例可以看到，当我们对盒子进行固定定位，原本的盒子就会根据我们对其进行的位置进行一个改变，例如示例中的盒子3，当盒子3移动到了其所固定的位置时，原本属于盒子3的位置则空了出来（浮层），紧随其后的盒子就往上填补掉空出的位置（浮层）。而被固定定位的盒子3的位置不会进行改变，就算页面文档发生了滚动，它也会一直待在相同的地方。
标签：定位,盒子,5px,示例,--,浮层,固定,CSS From： https://blog.csdn.net/2301_82005922/article/details/143066915