DivCSSabsolute與relative的區(qū)別小結(jié)_經(jīng)驗(yàn)交流

詳細(xì)講解兩者的關(guān)系，需要配合例子，請(qǐng)先看例子：

以下是引用片段：








　position: absolute;

　top: 5px;

　right: 20px;

　
position: absolute;

left: 20px;

bottom: 10px;




　position: absolute;

　top: 5px;

　left: 5px;



　position: relative;

　left: 150px;

　

　width: 300px; height: 50px;



　　
　

1

　

2

　

3

　

4

　

5

　
　　　 padding: 20px 0 0 20px;
　　position: absolute;
　　
　　　　position: relative;

　　 left: 200px;

　　

　　 width: 300px;

　　 height: 300px;

　　
　　　 position: absolute;

　　　 top: 20px;

　　　 right: 20px;

　　
　　　 position: absolute;

　　bottom: 20px;

　　left: 20px;

　　
　　
　
　

　　absolute：絕對(duì)定位，CSS 寫法“ position: absolute; ”，它的定位分兩種情況，如下：

　　1. 沒有設(shè)定 Top、Right、Bottom、Left 的情況，默認(rèn)依據(jù)父級(jí)的“內(nèi)容區(qū)域原始點(diǎn)”為原始點(diǎn)，上面例子紅色部分(父級(jí)黃色區(qū)域有 Padding 屬性，“坐標(biāo)原始點(diǎn)”和“內(nèi)容區(qū)域原始點(diǎn)”不一樣)。

　　2. 有設(shè)定 Top、Right、Bottom、Left 的情況，這里又分了兩種情況如下：

　　(1). 父級(jí)沒 position 屬性，瀏覽器左上角(即 Body)為“坐標(biāo)原始點(diǎn)”進(jìn)行定位，位置由 Top、Right、Bottom、Left 屬性決定，上面例子綠色部分。

　　(2). 父級(jí)有 position 屬性，父級(jí)的“坐標(biāo)原始點(diǎn)”為原始點(diǎn)，上面例子淺藍(lán)色部分。

　　relative：相對(duì)定位，CSS 寫法“ position: relative; ”，參照父級(jí)的“內(nèi)容區(qū)域原始點(diǎn)”為原始點(diǎn)，無父級(jí)則以 Body 的“內(nèi)容區(qū)域原始點(diǎn)”為原始點(diǎn)，位置由 Top、Right、Bottom、Left 屬性決定，且有“撐開或占據(jù)高度”的作用，上面例子橙色部分。

　　通過上面的例子和講解，相信熟練運(yùn)用 absolute 與 relative 并不是一件很困難的事，我們周圍有不少關(guān)于 absolute 與 relative 的好例子，比如“網(wǎng)易163免費(fèi)郵”首頁(http://mail.163.com)，里面就有大量的運(yùn)用。

　　例子代碼在 IE5.5、IE6、FF1.5、Opera9 測試通過。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com