css定位

静态定位

系统默认的定位方式，没有定位的意思在标准流的范围内

.class {
 positon:static; 
 }

相对定位

相对定位是相对于盒子原本位置的基础上做出的位置变动。
盒子并未脱离标准流，所以在盒子移动以后，原本的位置仍然保留。

.class{
 positon: relative;
  top:20px;
  left:20px;
  }

绝对定位

绝对定位如果其没有父盒子，或者父盒子没有定位，则以浏览器为准作为定位
当父盒子有定位时，以最近父盒子为准进行定位
绝对定位不占有原先的位置，在设置了绝对定位以后，后面的盒子占有该位置。

.class {
  position: absolute;
  top :20px;
  left: :20px;
  }

子绝父相

两个盒子要相互叠加，在叠加的时候，需要用父盒子约束子盒子，所以要给父盒子添加 定位，但是因为父盒子需要占有位置，不然后面的盒子会上升填充该位置，所以父盒子使用相对定位。子盒子需要叠加自由移动的话，就使用绝对定位，以父盒子作为标准进行位置设置。

固定定位

以浏览器的可视窗口作为标准，相对于窗口的位置不变
不占有原先的位置。

.class {
positon :fixed;
top:20px;
right:20px;
}

粘性定位

使用少，以js实现，以浏览器的可视区作为参照，所以在到达可视区边界就停止移动了

.class{
positon:sticky;
top:20px;//必须添加至少一个(top   button   left  right )值
}