相對定位和絕對定位的實(shí)際應(yīng)用
相對定位和絕對定位怎么用已經(jīng)明白了，但能幫忙舉個(gè)實(shí)際應(yīng)用案例嗎？什么情境下會用這個(gè)，什么情境下會用那個(gè)呢？
慕粉3571414
2016-09-09
5 回答
舉報(bào)
0/150
提交
取消
2016-09-09
?相對定位是相對于該塊元素在文檔流中的位置的，比如，我們可以使用相對定位把div2放到div1的右側(cè)，CSS代碼如下：?
#div1 {
??border: 1px solid #000099;
??height: 60px;
??width: 200px;
??margin:2px;
}
#div2 {
??border: 1px solid #000099;
??height: 60px;
??width: 200px;
??margin:2px;
??position: relative;
??top: -64px;
??left: 204px;
}
#div3 {
??border: 1px solid #000099;
??height: 60px;
??width: 200px;
??margin:2px;
}
下面是效果：
??可以看到一個(gè)有趣的現(xiàn)象，那就是雖然我們把div2移走了，但是div1和div3中間還是有一個(gè)空間，說明相對定位的元素是會占據(jù)文檔流空間的，這里的div2就是典型的“站著茅坑不拉屎”。
使用絕對定位也是可以把div2擺到div1的右邊的，而且絕對定位是不會占據(jù)文檔流空間的，如下圖，div1和div3之間沒有空白：
div2的CSS代碼：?
#div2 {
??border: 1px solid #000099;
??height: 60px;
??width: 200px;
??margin:2px;
??position: absolute;
??top: 15px;
??left: 214px;
}
你自己可以根據(jù)這個(gè)編寫代碼，就可以看出他們的效果?？偟膩碚f，絕對定位可以把內(nèi)容顯示在頁面的任何位置。但是相對位置卻做不到這一點(diǎn)。
2016-09-27
<!-- absolute;絕對定位: ?父元素沒加相對定位的時(shí)候相對于瀏覽器(或body)的位置移動；父元素加了相對定位，相對于自己原來的位置移動-->
relative的作用是讓父元素可以定住下面子元素的absolute。否則父元素下面的子元素使用absolute的時(shí)候會跳出父元素，因?yàn)槊看蝍bsolute都是根據(jù)瀏覽器左上角的位置移動的 當(dāng)父元素加了position:relative;的時(shí)候，子元素使用absolute 就不會跳出來
2016-09-27
<!-- absolute;絕對定位: ?父元素沒加相對定位的時(shí)候相對于瀏覽器(或body)的位置移動；父元素加了相對定位，相對于自己原來的位置移動-->
2016-09-09
你感覺最合適的情境下，他只是你設(shè)計(jì)的一個(gè)工具，同一個(gè)問題，情況不一樣，用的東西也不一樣
2016-09-09
同問。