css的一个小关卡position与float，它究竟有什么用？
初学者在给页面进行布局时经常会利用div疯狂堆积，如果没有成功就使用margin扩张领地，现在需要告别这种方式了，使用定位和浮动使页面布局更简单。
这张主要讲的是position定位中的绝对定位和相对定位
一、绝对定位和相对定位
（一）学习定位和浮动前需要知道的两个知识点
（1）首先我们需要知道当设置TRBL(top、right、bottom、left)时
同时设置left和right只有left生效；
同时设置bottom和top只有top生效；
（2）脱离文档流：需要明确脱离文档流不是脱离DOM树。脱离文档流的元素不再占据空间，如lrelative与其他元素重叠后还占据空间，而脱离了文档流的absolute就不再有空间即不会有本应属于它没移动的空白位置。
（二）absolute与relative
（1）绝对定位absolute:脱离文档流，移动的时候自身的所占空间消失。如果没有父元素，absolute相对于html进行定位。
<style>
.weizhi {
position: absolute;
top: 600px;
left: 60px;
}
</style>
<body>
<div style="background-color:chartreuse;height: 200px;width: 200px;" class="weizhi"></div>
</body>
当存在父元素时，以父元素为标准。
.weizhi {
position: absolute;
float: left;
top: 500px;
left: 60px;
bottom: 20px;
}
.weizhiSon {
position: absolute;
top: 60px;
left: 50px;
}
<div style="background-color:chartreuse;height: 200px;width: 200px;" class="weizhi">
<div style="background-color: brown;height: 50px;width: 50px;" class="weizhiSon">
</div>
</div>
当有一个同样是absolute的同样位置和大小的div，就算设置了浮动效果依然是盖在第一个div上的。这是因为absolute脱离了文档流，float没有效果。
.weizhi {
position: absolute;
float: left;
top: 500px;
left: 60px;
bottom: 20px;
}
.weizhi2 {
position: absolute;
float: left;
top: 500px;
left: 60px;
bottom: 20px;
}
<div style="background-color:chartreuse;height: 200px;width: 200px;" class="weizhi">
</div>
</div>
<div style="background-color: blue;height: 200px;width: 200px;" class="weizhi2"></div>
（2）相对定位relative
相对定位没有脱离文档流说明在元素移动时还保留着移动前的空间，这就是与absolute最重要的不同点。所以如果没有给relative设置移动值，对于元素是没有任何改变的。
怎样能看出来relative没有脱离文档流并保留了自己的位置呢，用一个absolute的div做对比
.Box1 {
position: relative;
/* float: left; */
top: 10px;
left: 10px;
}
.Box2 {
position: relative;
/* float: left; */
top: 10px;
left: 10px;
}
<div style="background-color:chartreuse;height: 200px;width: 200px;" class="Box1">
<!-- <div style="background-color: blanchedalmond;height: 50px;width: 50px;" class="box_1"></div> -->
</div>
<div class="Box2" style="background-color:darkolivegreen;height: 200px;width: 200px;"></div>
可以看出元素相对于进行改变，不影响其他元素，其原来空间依然存在，子元素也会随着relative的父元素进行移动。同样位移的元素并不会覆盖。
.Box1 {
position: relative;
float: left;
top: 10px;
left: 10px;
}
.Box2 {
position: relative;
float: left;
}
由图可得在relative中允许重叠
二、relative与absolute搭配使用效果更佳
（1）使用relative“拴住”absolute
在刚才的定义里我们得知absolute绝对定位的元素的位置相对于最近的已定位父元素，所以就算使用absolute得元素拥有父元素，如果其没有进行position，那么absolute的元素依然会参照html进行定位
我们创建三个div
<div style="background-color: blueviolet; height: 300px;width: 300px;" class="Box3">
<div style="background-color: rgb(222, 203, 240); height: 200px;width: 200px;" class="box_2">div2
<div style="background-color: rgb(188, 120, 252); height: 100px;width: 100px;" class="box_22">div3</div>
</div>
</div>
当div3的两个父元素没有进行定位时：
.Box3 {}
.box_2 {}
.box_22 {
position: absolute;
top: 0px;
left: 0px;
}
可见div3无视两个父元素直接以html进行定位
当我给div1（深紫盒子）加上relative
.Box3 {position: relative;}
.box_2 {}
.box_22 {
position: absolute;
top: 0px;
left: 0px;
}
可以看出这次div3无视了div2（浅紫盒子）以div1（深紫盒子）为标准进行定位
最后我们给div2加上relative并top:20px；left:60px;
.Box3 {
position: relative;
}
.box_2 {
top: 20px;
left: 600px;
position: relative;
}
.box_22 {
position: absolute;
top: 0px;
left: 0px;
}
这次div3以div2作为标准进行top:0;left:0;的定位了
所以我们经常使用relative对absolute进行规束
