目录
定位是什么？
定位是一种布局的手段，而且是一种高级的布局手段，可以将任何元素摆放在页面的任意位置
可以使用position设置定位
可选值：
static 默认值，不设置定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘滞定位
开启定位后，使用偏移量设置位置
left 相对于定位的位置左侧的偏移量
right 相对于定位的位置右侧的偏移量
top 相对于定位的位置上侧的偏移量
bottom 相对于定位的位置下侧的偏移量
定位的分类
一、相对定位
position:relative; 开启了相对定位
1、如果不设置偏移量，元素的位置是不会发生任何变化
2、设置偏移量，偏移量的相对位置是相对于元素原来在文档流中的位置
3、设置相对定位后，元素的性质不会发生变化
4、设置相对定位后，元素的层级提高
5、设置相对定位的元素不会脱离文档流
二、绝对定位
position:absolute; 开启了绝对定位
1、设置绝对定位后，元素脱离文档流
2、设置绝对定位后，元素的性质发生变化，不会区分块和行内了
3、设置绝对定位后,如果不设置偏移量，元素的位置是不会发生任何变化
4、绝对定位，它的原点是相对于其包含块来定位的
包含块：
1、默认情况下（没有开启定位的情况下），包含块就是元素的祖先元素
2、如果是定位的情况下，包含块就是元素开启定位的，离它最近的祖先元素
如果祖先元素都没有开启定位，则包含块就是根标签
5、设置绝对定位后，元素的层级提高
注意：
一般情况下，为了更好控制子元素的位置，开启子元素的绝对定位后，会同步开启父元素的相对定位。这叫“子绝父相”
三、固定定位
position:fixed; 开启了固定定位
1、用于固定在浏览器页面上，不会随浏览器滚轮滚动而改变位置
2、浏览器的视口为参照物，和父元素没任何关系
3、固定定位不占有原来的位置，即脱离文档流，更改元素的性质
4、应用场景
-固定导航
-广告
-固定侧边栏
四、粘滞定位
position:sticky; 开启了粘滞定位
1、浏览器的视口为参照物，和父元素没任何关系
2、占有原来位置，，不会脱离文档流，性质不发生变化
3、粘滞定位可以再元素到达某个位置时，将其固定
4、配合top值使用，没有达到top值之前正常显示，随着滚动条滚动而移动
到达top值之后类似固定定位，不会随着滚动条滚动而移动