css定位（相对，绝对，固定）

相对定位

相对于元素原来的位置移动，通过 top、bottom、left 和 right 四个属性指定移动的方向和距离
在实际应用中，很少使用相对定位来移动元素的位置，大多数是配合决定定位来移动元素距离

        .box{
            position: relative;   /*相对定位*/
            width: 300px;
            height: 200px;
            border: 1px solid red;
            right: 50px;   /*向左50px（和原来的自己相比往左50px）*/
            left: 50px;    /*向右50px（和原来的自己相比往右50px）*/
            bottom: 50px;	/*向上50px（和原来的自己相比往上50px）*/
            top: 50px;	/*向下50px（和原来的自己相比往下50px）*/
        }

绝对定位

1、相对与父元素定位，父元素必须也使用 position 属性设置了定位方式 ,如果没有设置，则继续向上寻找有定位的祖先元素，直到找到位置（相对与有定位的最近的父元素来定位）
2、实际开发中，如果向对一个元素使用绝对定位，中应该将其父元素设置为相对定位（子绝父相）

.box2{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: green;
            top:20px;  		/*距离顶部20px*/
            left: 20px;		/*距离左边距20px*/
            right: 30px;	/*距离右边距20px*/
            bottom: 50px;	/*距离底部20px*/
        }

固定定位

固定定位是指所插入的盒子不会随着页面的滚动而滚动，譬如导航栏

.nav {
    position: fixed;		/*固定不动（导航栏）*/
    top: 100px;
    right: 50px;
    width: 58px;
    height: 348px;
    background-color: #fff;
}

如京东右侧导航栏