css 定位

定位分为静态定位，相对定位，绝对定位，固定定位。

1.静态定位

  静态定位可以理解为标准流 
  /* 静态定位不能通过设置偏移来移动 */
  position: static;
  top: 200px;
  left: 200px;     

2.相对定位

  /* 相对定位 */
  /* 特点：
  1 需要配合方位属性来移动位置
  2 相对于自身原来的位置移动
  3 在页面中占位置-没有脱标
  应用场景：配合绝对定位进行使用(子绝父相)*/
  position: relative;
  top: 20px;
  left: 30px;
  background-color: blue;

3.绝对定位

  /* 绝对定位 */
  /* 特点：
  1 需要配合方位属性来移动
  2 默认相对浏览器的可视区域移动
  3.在页面中不占位置——脱标*/
  position: absolute;
  left: 50px;
  top: 100px;

4.固定定位

/* 特点
1需要配合方位属性移动
2默认在浏览器的可视范围移动 
3.在页面中不占位置 脱标*/
position: fixed;
  top: 0;
  left: 0;