五种定位、静态定位、相对定位、绝对定位、固定定位、粘性定位、实现元素水平垂直居中的方法

static 默认值
静态定位，相当于没有加

relative 相对定位

• 参考物: 元素自己本身的位置
• 移动方向和移动距离：
  left/top/right/bottom:数值px; (和设置的方向形成距离为正，交叉为负数)
• 相对定位
  移动之后是占位置的
  虽然定位和margin都可以调整元素的位置，
  但是一般情况下首选margin，
  如果有遇到元素向上移动过后，想预留位置的话，就选相对定位

absolute 绝对定位

• 参考物: 有(1)定位属性的(除默认的静态定位之外)(2)祖先元素

• 参考物特殊情况：
  (1) 如果要移动的元素的祖先元素很多都加了定位属性，那就参考离该元素最近的
  (2) 如果祖先元素都没有加定位属性，那就参考浏览器窗口

• 移动方式和距离:
  left/right/bottom/top:数值px/百分数

• 特点
  (1) 脱离文档流，会遮挡住后面的元素，且文字也会被遮挡
  (2) 脱离文档流的元素，margin:auto会失效
  (3) 内联元素加绝对定位之后，会变块元素

• 定位属性的层级关系 z-index:数字;
  (1) 默认值可以理解为0，值越大，层级越高，越在上面，
  (2) 可以设置负数
  (3) 该属性必须加在有定位属性的元素身上

fixed 固定定位

• 参考物: 浏览器窗口
• 移动方式和距离:left/right/bottom/top:数值px/数值%
• 特点
  (1) 脱离文档流
  (2) margin:auto会失效
  (3) 内联元素会变块级元素
  (4) 不会跟随滚动条进行滚动
  sticky 粘性定位
• 参考物：浏览器窗口
• 移动方向和距离：top:数值px
• 特点：
  初始属于正常的元素，不会跟随滚动，
  当达到所设置的top值的时候，类似与固定定位
  不跟随滚动条滚，且脱离文档流

实现元素的水平垂直居中

第一种
1.text-align：center；
2.line-height:元素高度；

第二种
1. 给该元素设置position:absolute;
2. 设置四个方向为0 left: 0;right: 0;top: 0;bottom: 0，该元素设置margin:auto; 水平垂直居中

第三种
1. 该元素设置position:absolute;
2. 该元素设置left:50%; 移动到参考物宽度中心的右侧,margin-left:-该元素宽度的一半;(这里不要使用百分数，因为百分数参考的是父元素)
3. 该元素设置top:50%; 移动到参考物高度中心的下侧,margin-top:-该元素高度的一半;(这里不要使用百分数，因为百分数参考的是父元素

第四种

1.子元素宽高改变可以自适应变化
2.子元素不设置宽高也可以拿到宽高的一半
元素{position:absolute;left:50%;top:50%;translate(-50%,-50%);（向左和向上拉取当前元素宽高的一半）

第五种

1.display:flex;
2、justify-content:center;
3、align-items:center;