來講講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;
}
<div id="divAddress">
<img id="img1" alt="address" src="<%=request.getContextPath()%>/images/address.png">
<div class="address">地址 ： <span style="font-weight: 600;color: black;">输入上海市卢湾区卢湾榜路758弄10号1011室</span></div>
</div>
<div id="peoplePost1">
<img id="people1" alt="people" src="<%=request.getContextPath()%>/images/people.png">
<div class="people2">联系人 : <span style="font-weight: 600;color: black;">张三</span></div>
<img id="post1" alt="post" src="<%=request.getContextPath()%>/images/post.png">
<div class="post2">职位 : <span style="font-weight: 600;color: black;">业务经理</span></div>
</div>上面也就是相對和絕對結合的html程式碼，以上就是本文的所有內容了，希望可以帶給大家幫助！
相關推薦：
以上是html中相對定位與絕對定位的詳細內容。更多資訊請關注PHP中文網其他相關文章！
