relative
relative表示，相对的是元素本身应该出现的位置（即static时的位置）进行偏移。
注意：
- 不会脱离文档流，本应该占的位置还会保留，下一个元素不能忽视它的存在。
position 属性的作用
position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。
- static (默认值，不发生重叠)
- relative
- fixed
- absolute
- sticky
absolute
absolute相对于祖先元素中最近的一个定位元素（position非static）进行偏移，否则定位基点就会变成整个网页的根元素html。要写上top 、left属性值。
注意：
- 脱离原来的位置，另起一层，如对话框的关闭按钮
- 善于用百分数，left:50% ;left:100%
- 会脱离文档流
fixed
fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。
注意：
- 常用于烦人的广告和回到顶部按钮
- 当祖先元素具有transform属性且不为none时，就会相对于祖先元素指定坐标，而不是浏览器窗口。（失效）
- 移动端不要使用这个属性（坑多）
sticky
sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。
因此，它能够形成"动态固定"的效果。比如，网页的搜索工具栏，初始加载时在自己的默认位置（relative定位） 等到页面重新向上滚动回到原位，工具栏也会回到默认位置。
sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作sticky的生效门槛。
它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时（即完全不可见），fixed定位自动切换回relative定位。
