（注1：如果有問(wèn)題歡迎留言探討洒宝，一起學(xué)習(xí)扶镀！轉(zhuǎn)載請(qǐng)注明出處凿傅，喜歡可以點(diǎn)個(gè)贊哦２）
（注2：更多內(nèi)容請(qǐng)查看我的目錄。）
1. 簡(jiǎn)介
一旦一個(gè)盒子遵循常規(guī)流或者浮動(dòng)擺放好后聪舒，它有可能根據(jù)這個(gè)位置來(lái)相對(duì)位移辨液，這被稱(chēng)作相對(duì)定位。通過(guò)這種方式移動(dòng)盒（ B1 ）對(duì)隨后的盒（ B2 ）沒(méi)有影響： B2 被賦予了一個(gè)如同 B1 沒(méi)有位移的位置过椎，并且 B2 在 B1 移動(dòng)后不會(huì)重定位室梅。這意味著相對(duì)定位可能造成盒重疊。然而疚宇，如果相對(duì)定位造成一個(gè) overflow:auto 或 overflow:scroll 的盒溢出亡鼠，客戶(hù)端必須通過(guò)創(chuàng)建滾動(dòng)條來(lái)讓用戶(hù)可以訪(fǎng)問(wèn)到該內(nèi)容（在其偏移位置），這可能影響布局敷待。
一個(gè)相對(duì)定位盒保持其常規(guī)流中的大小间涵，包括斷行和原本為其保留的空間。
2. left 和 right
對(duì)于相對(duì)定位元素而言榜揖， left 和 right 在不改變盒大小的同時(shí)使其水平位移勾哩。 left 使盒向右移動(dòng)， right 使其向左移動(dòng)举哟。 left 或 right 沒(méi)有造成盒的分割或拉伸思劳，因此使用值始終滿(mǎn)足： left = - right 。
left和right取值有如下情況：
如果 left 和 right 的值均為 auto （默認(rèn)值initial value）妨猩，則使用值為 0 （即是說(shuō)潜叛，盒保持在其原位）。
如果 left 是 auto 壶硅，其使用值為 right 的負(fù)值（即盒向左移動(dòng) right 值）威兜。
如果 right 是 auto ，其使用值為 left 的負(fù)值庐椒。
如果 left 和 right 均不為 auto 椒舵，定位則被過(guò)度約束，其中一值必須被忽略约谈。如果包含塊的 direction 屬性值為 ltr 笔宿，則 left 值勝出而將 right 值修改為 - left 犁钟。如果包含塊的 direction 屬性值為 rtl ， 則 right 值勝出而將 left 值忽略措伐。
如下所示特纤，三條規(guī)則是等效的：
div.a8 {
position: relative;
direction: ltr;
left: -1em;
right: auto
}
div.a8 {
position: relative;
direction: ltr;
left: auto;
right: 1em
}
div.a8 {
position: relative;
direction: ltr;
left: -1em;
right: 5em
}
3. top和bottom
top 和 bottom 屬性在不改變相對(duì)定位元素的大小的同時(shí)使其上下位移。 top 使其下移侥加， bottom 則使其上移捧存。 top 或 bottom 沒(méi)有造成盒的分割或拉伸，因此使用值始終滿(mǎn)足： top = - bottom 担败。如果二者均為 auto 昔穴，其值則均為 0 。如果其中一個(gè)值為 auto 提前，則該屬性取另一屬性的負(fù)值吗货。如果二者均不為 auto ， bottom 將被忽略（也就是說(shuō)狈网， bottom 使用為 top 的負(fù)值）宙搬。
注：在腳本環(huán)境中動(dòng)態(tài)移動(dòng)相對(duì)定位盒可以產(chǎn)生動(dòng)畫(huà)效果（見(jiàn) 'visibility' 屬性）。盡管相對(duì)定位可被用于上標(biāo)和下標(biāo)效果拓哺，但行高在自動(dòng)調(diào)整時(shí)不會(huì)將其定位納入計(jì)算勇垛。參見(jiàn)line height calculations一節(jié)的描述了解更多信息。
參考
https://www.w3.org/TR/CSS22/visuren.html#visual-model-intro
https://www.w3.org/TR/CSS2/visuren.html
CSS規(guī)范 > 9 視覺(jué)格式化模型 Visual Formatting Model
