问题:
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%;
}