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

定位有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写（因为兼容性太差）

总结

定位的叠放顺序

当出现多个定位重叠时，需要规定叠放的顺序（只有定位的盒子有这个属性）：

z-index: 1;

数字可以是正整数、负整数 、0 、auto，数字越大，等级越高，越靠上。