CSS | 走进position与float定位浮动和重叠，重新定义你的布局（一）

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进行规束