一、定位类型有哪些？
静态定位（默认）、相对定位、绝对定位、固定定位、粘滞定位 第一种：静态定位-static 特点：是浏览器默认上至下、左至右排序 第二种：相对定位 语法：position：relative 特点： 相对与自身在浏览器中的原来位置移动 不脱离文档流，会继续在标准流中占用一份空间 同一方向上的定位属性只能使用一个，right/left+top/bottom 常用于父级相对定位、子级绝对定位 例子：执行前
蓝色相对定位后：
蓝色div代码块：
.div2 {
background-color: powderblue;
/* 相对定位
特点：相对于子自身再浏览器中的默认位置(原来位置)
不脱离文档流
*/
position: relative;
top: 40px;
left: 40px;
}
第二种：绝对定位
语法：position：absolute
特点：
脱离标准流
不区分块级、行内、行内块级元素
同一方向上的定位属性只能使用一个，right/left+top/bottom
忽略祖先元素的padding
参考点：若绝对定位的元素有祖先元素也是定位流（绝对定位、固定定位、相对定位）, 那么这个绝对定位的元素就会以该元素作为参考点，若有多个参考点，则就近原则。
否则，都以body为参考点 例子： 蓝色包含黑色 蓝色div：相对定位 黑色div：绝对定位 执行前：
执行后：
/* 父级 */
.div2 {
position: relative;
/* position: absolute; */
background-color: powderblue;
}
/* 子级 */
.div4 {
width: 50px;
height: 50px;
background-color: rgb(96, 100, 99);
/* 设置绝对定位
特性：
1、脱离文档流 原位置不保留 下面的东西会顶上来(它会覆盖下面的元素)
2、默认使用了绝对定位的元素 无论有无父元素 参数点是body
3、若祖先元素（父元素-爷爷元素-直系元素-body元素）设置了相对定位，则参照点为最近的祖先元素
*/
position: absolute;
top: 40px;
left: 30px;
}
第三种：固定定位
语法：
特点：position：flex
让固定盒子不随着滚动条的滚动而滚动
脱离文档流、不会占用标准流中的空间
不区分行内、块级、行内块级
同一方向上的定位属性只能使用一个，right/left+top/bottom
例子：一共50个div 不论怎么滑动 flex元素始终不动
执行前：
执行后：
.divBot {
width: 100px;
height: 100px;
background-color: antiquewhite;
/* 设置固定 */
top: 100px;
left: 300px;
position: fixed;
}
第四种：粘滞定位（开始相对定位、到达设定的值为固定定位）
语法：position：sticky
特点：
不脱离文档流，保留元素原本位置
结合了relative和fixed两种定位功能于一体的特殊定位（跨越特定值，之后为固定定位）
使用条件：
执行前：
执行后：
（图片比较难看出来，这给全部的代码）
网易-导航栏