html中相對定位與絕對定位

html是整個文檔空間，body是html中的文檔空間， body與html相差9cm左右

postion中的相對定位：relative

postion中的絕對定位：absoute

相對定位：

當沒有參照物的時候，相對定位是相對與body定位的

絕對定位：

當沒有參照物額時候，絕對定位是相對與html定位的

使用margin的時候，是占用文檔空間的，一般用在相對定位使用

使用top，left，right，button的時候，是不占用文檔空間的，看情況使用

我們一般是在相對里面套用絕對來進行項目的開發(fā)

               #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;">輸入上海市盧灣區(qū)盧灣榜路758弄10號1011室</span></div>
                </div>

               <div id="peoplePost1">
                    <img id="people1" alt="people" src="<%=request.getContextPath()%>/images/people.png">
                    <div class="people2">聯(lián)系人 : <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;">業(yè)務經(jīng)理</span></div>
                </div>

上面也就是相對和絕對結合的html代碼，以上就是本文的所有內(nèi)容了，希望可以給大家?guī)�來幫助�?/p>

相關推薦：

html的絕對路徑和相對路徑怎么使用

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

css絕對定位實現(xiàn)居中的八種方式代碼詳解

以上就是html中相對定位與絕對定位的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！