CSS基础：定位：相对定位、绝对定位、固定定位

定位有5种，以下所有的代码中的top、left只是做个说明，还可以写buttom、right

静态定位

position: static;

暂时不知道它有什么用

相对定位

position: relative;
top:0;
left:0

这个是相对于自身的位置进行移动，移动之后，之前的位置还是被占用的状态；但是这个一般用于对父盒子的定义（下面细讲）

绝对定位

position: absolute;
top:0;
left:0

相对于其父级的位置，但是父级必须得定义定位的方式，否则就是相对于整个页面的位置。

绝对定位是脱标的，会压住下面标准流的全部内容。

一般来说，采用“子绝父相”的方法，例如下面这个例子

定义整个大的盒子为相对定位，定义“new”图片的小盒子为绝对定位，就可以将“new”相对于这个大盒子进行移动，从而放入到相应的位置

固定位置

position: fixed;
top:0;
left:0

将盒子固定在可视页面中不动

小技巧：将小盒子固定在版心右侧，而不是页面右侧

    position: fixed;
    right: 50%;        /*定位到页面中间*/
    margin-right: 20px;/*再右移移动距离到达想要的地点*/

粘性定位

position: sticky;
top:0;

可以实现对应盒子下拉时，一直卡在页面上方（或者其他方向），必须要带top、buttom等的其中一个，但是用的很少，一般用js写（因为兼容性太差）

总结