定位（position）

一、为什么使用定位？

1.浮动可以让多个盒子一行没有缝隙排列显示,经常用于横向排列盒子。
2.定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中的某个位置,并且可以压住其他盒子。

定位组成：
定位：将盒子定在某一个位置,所以定位也是在摆盒子,按照定位的方式移动盒子。
定位 = 定位模式 + 变偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

二、定位模式

定位模式决定元素的定位方式,它通过css的position属性来设置,其值可以分为：

值	语义
relative	相对定位
absolute	绝对定位
fixed	固定定位
sticky	粘滞定位

三、边偏移

边偏移属性	示例	描述
top	top:80px	顶端偏移量,定义元素相对于其父元素上边线的距离
bottom	bottom:80px	底部偏移量,定义元素相对于其父元素下边线的距离
left	left:80px	左侧偏移量,定义元素相对于其父元素左边线的距离
right	right:80px	右侧偏移量,定义元素相对于其父元素右边线的距离

四、定位模式介绍

1、相对定位 position：relative；

增加代码后运行：

特点：position：relative  开启了相对定位
      1、如果不设置偏移量，元素的位置是不发生任何变化
      2、设置偏移量，偏移量的相对位置是相对于元素原来在文档流中的位置（left：0；top：0）
      3、设置相对定位后，元素的性质是不发生变化
      4、设置相对定位后，元素的层级会提高
      5、设置相对定位后，元素是不会脱离文档流

2、绝对定位 position：absolute;

绝对定位后的特点
        1、设置绝对定位后，元素会脱离文档流
        2、设置绝对定位后，元素的性质就会发生变化，就不会再区分块还是行内了
        3、设置绝对定位后，如果不设置偏移量，元素的位置也不会发生变化
        4、绝对定位，它的原点是相对于其包含块来定位的
        5、设置绝对定位后，元素的层级也会提高

3、固定定位  position: fixed；

元素的position属性设置fixed时，则开启了元素的固定定位
    （1）用于固定在浏览器页面上，不随浏览器的滚动而改变位置；
    （2）以浏览器为参照物，和父元素没有任何关系；
　（3）固定定位不占有原来的位置，即脱离标准流 ，更改元素的性质
      (4)应用场景
        - 固定导航
        - 固定侧边栏
        - 广告  

4、粘滞定位  position: sticky;

 粘滞定位 （一般用于页面导航的吸顶效果)
    -当元素的position属性设置为sticky时，则开启了元素的粘滞定位

    （1）以浏览器为参照物（体现固定定位特点）；
    （2）占有原来位置（体现相对定位特点）,不会脱离文档流，元素性质也不会发生变化；
　　 （3）粘滞定位可以在元素到达某个位置时，将其固定 
     (4)配合top值设置，没有达到top值之前正常显示，随着滚动条滚动而滚动，
        达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动