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