首先看一個範例：

結構：

樣式：

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

效果圖：

總結！

透過設定元素垂直和水平的位置，可以使得：

一.相對定位：元素「相對於」它的起點移動。圖上的元素即相對於起點向下移動了50px。它佔據著原有的空間。

二.絕對定位：元素「相對於」它的父元素移動（或是離它最近的已定位的祖先元素移動）。圖上元素的左上角座標和它的父元素重合。它不佔據空間。

三.固定定位：元素「相對於」視口移動。圖上元素移動到座標（0,0）的位置。它不佔據空間。