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