相對位置

將階層式樣式表位置屬性設為 "relative" 時，會將元素放在文件的自然 HTML 流程中，並根據前面的內容位移元素的位置。

設定相對位置

將一段文字放在具有相對位置的段落中時，會以相對於段落中該段文字前面之文字的位置呈現該段文字，如下列程式碼範例中所示範：

<p>The superscript in this name<span style="position: relative; top:-3px">xyz</span> is "xyz".</p>

如果使用者調整視窗大小，"xyz" 仍會顯示在文字的自然基準線上方三個像素之處。同樣地，您可以設定 left 屬性，以變更 "name" 與 "xyz" 之間的水平間距。如果跨越的內容是以絕對方式定位，則 "xyz" 會放在相對於 HTML 元素的位置 (或階層中下一個定位元素)，且幾乎無法在瀏覽器視窗的左上角看見 "xyz"，這大概不是您想要的效果。

文件流程

接在以相對方式定位之元素後面的文字和元素會佔據其自己的空間，且不會與定位元素的自然空間重疊。相反地，以絕對方式定位之元素的後續文字和元素，會佔據從文件流程抽出定位元素前原本為定位元素之自然空間的空間。

以相對方式定位的元素可能與網頁上其他物件和元素重疊。您可以使用 z-index 屬性，設定相對於可能佔據相同區域之其他元素的定位元素之 Z 軸索引。根據預設，定位元素的 Z 座標一定高於其父元素的 Z 座標，這表示它一定會顯示在其父元素的上方。