絕對位置
以絕對方式定位的元素永遠相對於下一個定位父元素。如果沒有父元素，會改用內含項目區塊。左側及上方的值會相對於階層中下一個定位元素的左上角。例如，若要將影像放在文件的左上角，請將屬性設為 0。
<img src="sample.gif" style="position: absolute; left: 0px; top: 0px">
此程式碼範例會將影像放在 HTML 元素的框線內。請注意，HTML 元素具有 1 的預設框線。如果您不想要兩條框線，請將本文的框線設為 0，以便將影像放在瀏覽器視窗的 0,0 座標位置。
定位父元素如何影響絕對位置
若要瞭解定位父元素如何影響絕對位置，請考慮下列範例：
<div style="position: relative; left: 50px; top: 30px; height: 100px; width: 100px;">
Some text inside the div that will be hidden by the image because
the image will be positioned over this flowing text.
<img src="sample.gif" style="position: absolute; left: 0px; top: 0px;">
<div>
此範例會將 IMG 元素放在 DIV 元素的左上角，而 DIV 元素本身是放在網頁上。
絕對位置和文件流程
設定絕對位置會將元素從文件流程中抽出，並在不考慮周圍元素的版面配置下放置該元素。如果其他元素已經佔據指定位置，它們不會影響定位元素，且定位元素也不會影響它們。但是所有元素會在相同位置繪製，導致物件重疊。您可以使用 z-index 屬性，指定元素在相同位置堆疊的順序，以控制此重疊。
定位元素的內容會按照預設 HTML 的流動方式，在元素的尺寸內流動。例如，文字會根據包含文字之元素的寬度來換行。定位元素內所包含的任何內嵌元素會根據包含這些元素之定位元素的大小和形狀限制，依照它們在元素內的發生順序，放在彼此相鄰的位置。