relative 和 absolute 定位关系

问题：

　　relative 和 absolute 之间的关系是什么？有什么区别？

那，答案呢？

　　relative  相对定位， 以自己没有设置relative 属性之前的位置来定位，占用没有设置relative 属性前的位置与空间，其中背景图和图片其他内容显示在页面最上层，占用自己原本位置空间，不挤占其他html快的空间

　　absolute  绝对定位，一直往上级找relative属性，不找同级，找到含有relative的标签进行定位，没找到相对body定位，释放原本占用的位置空间，从侧面看，相当于把这块有absolute 属性的内容从html平面中抽出来放在html平面的上面

　　两者都有left 和 top属性， 只是两者的参照原点不同，但是坐标原点都在左上角

　　一般这两个联合使用，相对定位不改变位置并固定的内容大小，不随屏幕的更改而改变，让absolute定位其中，或者单独absolute定位全窗口导航信息，比如返回顶面，QQ 电话等联系方式链接

那，既然清楚了这两个定位概念，实现一个绝对放屏幕居中？

　　1. 定义一个容器包裹这快内容

　　2. 使用absolute，相对body进行定位， 宽高占用50%

　　3. 通过 transform 属性把定位坐标移到屏幕中央

.box-break {
    width: 1600px ;
    background-color: orange;
    padding: 50px;
    margin: 0;
    border: solid 2px red;
    /*position 绝对定位，一直往上级找relative属性，不找同级，找到相对relative定位，没找到相对body定位，并且还有个属性，并不占用html本来空间*/
    position: absolute;
    left: 50%;
    top: 50%;
    /*通过transform把屏幕上坐标点移到屏幕中心*/
    transform: translate(-50%, -50%);
}

body {
    /*让其body内容定窗口显示*/
    margin: 0;
    padding: 0;
    background: url("../img/girl.jpg");
    background-size: 100%;
}