来讲讲html中相对定位与绝对定位,有的后端同学对html的相对定位与绝对定位,不太熟的福利来了,本篇对于html的相对定位与绝对定位讲的很详细呢!
html是整个文档空间,body是html中的文档空间, body与html相差9cm左右
postion中的相对定位:relative
postion中的绝对定位:absoute
相对定位:
当没有参照物的时候,相对定位是相对与body定位的
绝对定位:
当没有参照物额时候,绝对定位是相对与html定位的
使用margin的时候,是占用文档空间的,一般用在相对定位使用
使用top,left,right,button的时候,是不占用文档空间的,看情况使用
我们一般是在相对里面套用绝对来进行项目的开发#divAddress{
position: relative;
margin-top: 48px;//这就是刚才提的当使用margin的时候才能进行下面的相对
width: 370px;
height: 66px;
border-bottom: 1px #c1c1c1 solid;
}
#img1{
position: absolute;
float: left;margin-top:2px;
width: 24px; height: 24px;
}
.address{
position: absolute;
margin-left: 34px;
font-size: 20px;
color: #c1c1c1;
}
#peoplePost1{
position: relative;
margin-top: 12px;
width: 370px;
height: 40px;
border-bottom: 1px #c1c1c1 solid;
}
#people1{
position: absolute;
float: left;margin-top:2px;
width: 24px; height: 24px;
}
.people2{
position: absolute;
margin-left: 34px;
font-size: 20px;
color: #c1c1c1;
}
#post1{
position: absolute;
float: left;margin-top:2px;margin-left:192px;
width: 24px; height: 24px;
}
.post2{
position: absolute;
margin-left: 222px;
font-size: 20px;
color: #c1c1c1;
}
上面也就是相对和绝对结合的html代码,以上就是本文的所有内容了,希望可以给大家带来帮助!
相关推荐: