首先看一個(gè)示例：

結(jié)構(gòu)：

<div class="static">默認(rèn)定位
<div class="relative">相對(duì)定位
<div class="absolute">絕對(duì)定位</div>
<div class="fixed">固定定位</div>
</div>
</div>

樣式：

*{padding: 0;margin: 0;}
.static{width:300px;height: 300px;}
.relative{margin:50px 50px;width: 200px;height: 200px;position: relative;top: 50px;}
.absolute{position: absolute;top: 0;left: 0;width: 100px;height: 100px;}
.fixed{position: fixed;top: 0;left: 0;width: 100px;height: 100px;}

效果圖：

總結(jié)！

通過設(shè)置元素垂直和水平的位置，可以使得：

一.相對(duì)定位：元素“相對(duì)于”它的起點(diǎn)移動(dòng)。圖上的元素即相對(duì)于起點(diǎn)向下移動(dòng)了50px。
它占據(jù)著原有的空間。

二.絕對(duì)定位：元素“相對(duì)于”它的父元素移動(dòng)（或者是離它最近的已定位的祖先元素移動(dòng)）。
圖上元素的左上角坐標(biāo)和它的父元素重合。它不占據(jù)空間。

三.固定定位：元素“相對(duì)于”視口移動(dòng)。圖上元素移動(dòng)到坐標(biāo)（0,0）的位置。它不占據(jù)空間。