相对定位

    1、相对定位relative 参考的元素是自己，没有脱离标准文档流，不会让出位置，位置还是在原来，
    2、结合absolute实现子绝父相

绝对定位

    1、绝对定位absolute 参考元素是它的父亲或者祖先最近的一个设置定位的元素
    2、设置为绝对定位后，会脱离标准文档流，让出位置给其他的元素
    3、一般用在轮播图，父视图上有其他固定的子视图，
    4、父元素或者祖先必须有一个设置了定位，并结合left top 或者bottom right等  才会起作用。

固定定位

    1、固定定位参考点是浏览器窗口
    2、结合left top bottom right参考浏览器窗口设置固定位置

--------注意点-------

    1、绝对定位一般跟设置相对定位的父元素或者祖先元素配合使用
        .banner {
        position: relative;
        width: 400px;
        height: 300px;
        /* 水平居中 左右margin设置为auto 根据子元素的宽度自适应 */
        margin: 30px auto;
    }
    
    .banner ul li{
        display: none;
    }
    .banner ul li img{
        position: absolute;
        left: 0px;
        top: 0px;
        width: 400px;
        height: 300px;
    }
     2、这里提一嘴浮动效果float：left
            浮动也是脱离标准文档流，让位置给其他元素，使用场景一般是元素不固定，从做到右排列或者从右到左排列，配合clearfix：after 添加一个末尾的display为block的盒子来清除浮动带来的影响从而撑开父元素的高度。
          如果知道子元素的个数且只在一行内显示，那就固定父元素的额高度，不用做清除浮动带来的影响了。