定位及其特点、居中公式

一、定位：position

1.作用：
    1.调整元素位置
    2.实现一些覆盖效果
2.定位模式
    1.静态定位static（默认值，写和不写一样）
    2.相对定位relative
    3.绝对定位absolute
    4.固定定位fixed
    5.粘性定位sticky
调整元素的位置：需要借助偏移值（方位名词：上下左右）来实现

二、每种定位的特点

1.绝对定位
    会脱离
    有层叠，通过z-index来调整
    参照物：默认是浏览器窗口的第一个屏幕
    如果想让父亲为参照物：父亲必须有定位（可以是静态之外的任何一种）
使用场景：实现覆盖
2.相对定位
    1.不会脱离文档流，依然占据位置
    2.有层叠顺序，默认情况后者覆盖前者，可以通过z-index来调整层叠顺序。
    3.参照物；是自己原来的位置
使用场景：简单的位置调整，给绝对打辅助
3.  固定定位特点：
    1.会脱离文档流，不占据位置
    2.有层叠顺序，默认后者覆盖前者，可以通过z-index来调整层叠顺序
    3.参照物：永远是浏览器窗口
    使用场景：小广告、左右2侧导航。
4.粘性定位特点：
    不滚动的时候相当于相对定位，滚动的时候相当于固定定位。
使用场景：可以实现吸顶效果（比如：顶部导航栏）

三、居中公式

1.方式一：(推荐)
    先子绝父相
    水平居中：left:50%;margin-left:负的自身宽度的一半;
    垂直居中：top:50%;margin-top:负的自身高度的一半;
2.方式二：
    先子绝父相
    margin:auto;
    left:0;right:0;top:0;bottom:0;