html中相對定位與絕對定位

來講講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  src="/static/imghwm/default1.png"  data-src="<%=request.getContextPath()% alt="html中相對定位與絕對定位" >/images/address.png"  class="lazy"  id="img1" alt="address" >
                    <div class="address">地址 ： <span style="font-weight: 600;color: black;">输入上海市卢湾区卢湾榜路758弄10号1011室</span></div>
                </div>

               <div id="peoplePost1">
                    <img  src="/static/imghwm/default1.png"  data-src="<%=request.getContextPath()% alt="html中相對定位與絕對定位" >/images/people.png"  class="lazy"  id="people1" alt="people" >
                    <div class="people2">联系人 : <span style="font-weight: 600;color: black;">张三</span></div>
                    <img  src="/static/imghwm/default1.png"  data-src="<%=request.getContextPath()% alt="html中相對定位與絕對定位" >/images/post.png"  class="lazy"  id="post1" alt="post" >
                    <div class="post2">职位 : <span style="font-weight: 600;color: black;">业务经理</span></div>
                </div>

上面也就是相對和絕對結合的html程式碼，以上就是本文的所有內容了，希望可以帶給大家幫助！

相關推薦：

#html的絕對路徑和相對路徑怎麼使用

#相對定位或絕對定位的適用條件

css絕對定位實現居中的八種方式代碼詳解

以上是html中相對定位與絕對定位的詳細內容。更多資訊請關注PHP中文網其他相關文章！