CSS的定位屬性有三種，分別是絕對定位、相對定位、固定定位。
| position: absolute; <!-- 絕對定位 -->position: relative; <!-- 相對定位 -->position: fixed; <!-- 固定定位 --> |
下面逐一介紹。
相對定位
相對定位：讓元素相對于自己原來的位置，進(jìn)行位置調(diào)整（可用于盒子的位置微調(diào)）。
我們之前學(xué)習(xí)的背景屬性中，是通過如下格式：background-position:向右偏移量 向下偏移量;
但這回的定位屬性，是通過如下格式：
| position: relative; left: 50px; top: 50px; |
相對定位的舉例：
| <!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> body{ margin: 0px; } .div1{ width: 200px; height: 200px; border: 1px solid red; } .div2{ position: relative;/*相對定位：相對于自己原來的位置*/ left: 50px;/*橫坐標(biāo)：正值表示向右偏移，負(fù)值表示向左偏移*/ top: 50px;/*縱坐標(biāo)：正值表示向下偏移，負(fù)值表示向上偏移*/ width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div class="div1">有生之年</div> <div class="div2">狹路相逢</div> </body></html> |
效果：
相對定位不脫標(biāo)
相對定位：不脫標(biāo)，老家留坑， 別人不會把它的位置擠走 。
也就是說，相對定位的真實位置還在老家，只不過影子出去了，可以到處飄。
相對定位的用途
相對定位有坑，所以如果需要做一般不用于做“壓蓋”效果（把一個div放到另一個div之上）。頁面中，效果極小。就兩個作用：
（1）微調(diào)元素
（2）做絕對定位的參考，子絕父相
相對定位的定位值
left：盒子右移
right：盒子左移
top：盒子下移
bottom：盒子上移
PS：負(fù)數(shù)表示相反的方向。
↘：
| position: relative; left: 40px; top: 10px; |
↙：
| position: relative; right: 100px; top: 100px; |
↖：
