# 4.2 position * **static** ``` .static { position: static; } ``` ![](/files/-Lh8qOfed7IuNF5qFAQF) * **relative** ``` .relative1 { position: relative; } .relative2 { position: relative; top: -20px; left: 20px; background-color: white; width: 500px; } ``` ![](/files/-Lh8qXTT5iPPSyb1_dYZ) * **absolute** `absolute` 與 `fixed` 的行為很像，不一樣的地方在於 `absolute` 元素的定位是在他**所處上層容器的相對位置**。如果這個套用 `position: absolute` 的元素，其上層容器並沒有「可以被定位」的元素的話，那麼這個元素的定位就是相對於該網頁所有內容（也就是 *\* 元素）最左上角的絕對位置，看起來就是這張網頁的絕對位置一樣，所以當你的畫面在捲動時，該元素還是會隨著頁面捲動。請記得，只有套用 `position: static` 的元素屬於「不會被特別定位」的元素，套用 `static` 以外的屬性值都算是「可以被定位」的元素。 ``` .relative { position: relative; width: 600px; height: 400px; } .absolute { position: absolute; top: 120px; right: 0; width: 300px; height: 200px; } ``` ![](/files/-Lh8qjmKyhYTA6vTzSKo) * **fixed** 固定定位（`position: fixed`）的元素會相對於瀏覽器視窗來定位，這意味著即便頁面捲動，它還是會固定在相同的位置。和 `relative` 一樣，我們會使用 `top` 、 `right` 、 `bottom` 和 `left` 屬性來定位。 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://jack1in.gitbook.io/font-end/4.-css/4.2-position.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.