# position

[CSS](https://lochiwei.gitbook.io/web/css) ⟩ [layout](https://lochiwei.gitbook.io/web/css/layout) ⟩ position

{% hint style="success" %}
設定了 <mark style="color:purple;">**`position`**</mark> 的元素稱為<mark style="color:yellow;">定位元素</mark> (*<mark style="color:purple;">**positioned element**</mark>*) 。

* <mark style="color:blue;">`relative`</mark>：提供<mark style="color:orange;">子元素</mark>新的<mark style="color:yellow;">參考座標</mark>，但<mark style="color:yellow;">自己位置不變</mark>。
* <mark style="color:blue;">`absolute`</mark>：參考[最近定位父元素](https://lochiwei.gitbook.io/web/css/layout/position/positioned-ancestor)，將自己定位在<mark style="color:yellow;">絕對位置</mark>上。
* <mark style="color:blue;">`fixed`</mark>：
* <mark style="color:blue;">`sticky`</mark>：
* <mark style="color:blue;">`static`</mark>：
  {% endhint %}

```javascript
"position"   "top/left" relative to               removed from flow
-----------------------------------------------------------------------
fixed        `viewport`                                  ✅ 
relative     where it should be                          ❌ 
absolute     `document` / nearest positioned parent      ✅ 
```

{% tabs %}
{% tab title="⭐️ 重點" %}
\*

* <mark style="color:blue;">`static`</mark> 是預設屬性，<mark style="color:red;">不會</mark>被子元素視為是「定位父元素」 。

{% hint style="info" %}

* By default, any **positioned** element appears **in front of** any **non-positioned** elements.
  {% endhint %}

{% hint style="success" %}

* [coordinates](https://lochiwei.gitbook.io/web/browser/concepts/coordinates "mention") of <mark style="color:yellow;">**fixed**</mark> elements are relative to the [viewport](https://lochiwei.gitbook.io/web/browser/dom/type/window/viewport "mention").
* [coordinates](https://lochiwei.gitbook.io/web/browser/concepts/coordinates "mention") of <mark style="color:yellow;">**absolutely positioned**</mark> elements are relative to the [document](https://lochiwei.gitbook.io/web/browser/dom/type/document).
  {% endhint %}

{% hint style="warning" %}
If <mark style="color:orange;">**none**</mark> of the <mark style="color:yellow;">**absolutely**</mark>**&#x20;positioned element**’s <mark style="color:yellow;">**ancestors**</mark> are <mark style="color:orange;">**positioned**</mark>, then the element will be positioned based on **the&#x20;**<mark style="color:purple;">**initial containing block**</mark> - an area with dimensions equal to the <mark style="color:yellow;">**viewport**</mark> size, anchored at the top of the page.
{% endhint %}

{% hint style="info" %}
By setting <mark style="color:purple;">top</mark>/<mark style="color:purple;">bottom</mark>, <mark style="color:purple;">left</mark>/<mark style="color:purple;">right</mark> , you also **implicitly** define the <mark style="color:yellow;">**width**</mark> / <mark style="color:yellow;">**height**</mark> of the (<mark style="color:green;">**fixed**</mark> and <mark style="color:green;">**absolutely**</mark>, but <mark style="color:red;">**not relatively**</mark> positioned) element.
{% endhint %}

{% hint style="danger" %}
Unlike **fixed** and **absolute** positioning, you <mark style="color:red;">**cannot**</mark> use <mark style="color:purple;">top</mark>/<mark style="color:purple;">bottom</mark>, <mark style="color:purple;">left</mark>/<mark style="color:purple;">right</mark> to <mark style="color:red;">**change the size**</mark> of a <mark style="color:yellow;">**relatively positioned**</mark> element.&#x20;

* can use <mark style="color:purple;">**top**</mark> <mark style="color:yellow;">**or**</mark> <mark style="color:purple;">**bottom**</mark>, <mark style="color:red;">**but not both**</mark> (<mark style="color:purple;">**bottom**</mark> will be <mark style="color:red;">**ignored**</mark>).
* can use <mark style="color:purple;">**left**</mark> or <mark style="color:purple;">**right**</mark>, <mark style="color:red;">**but not both**</mark> (<mark style="color:purple;">**right**</mark> will be <mark style="color:red;">**ignored**</mark>).
  {% endhint %}

{% hint style="warning" %} <mark style="color:yellow;">**z-index**</mark>

* **z-index** only works on **positioned** elements.
* applying a **z-index** to a **positioned** element establishes a **stacking context**.
* Elements with a **negative** **z-index** appear **behind** **static** elements.
  {% endhint %}
  {% endtab %}

{% tab title="📘 手冊" %}

* [inset](https://developer.mozilla.org/en-US/docs/Web/CSS/inset) - shortcut for top, right, bottom, left
* CSS ⟩ [Understanding CSS z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index)
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] CSSTricks ⟩ [inset](https://css-tricks.com/almanac/properties/i/inset/)&#x20;
* [ ] JavaScript: The Definitive Guide (15.5 Document Geometry & Scrolling)
* [ ] ChatGPT ⟩ [學習 CSS 排版](https://chatgpt.com/share/67615fd5-26cc-800e-b740-63aa8d06b4c4)
  {% endtab %}

{% tab title="👥 相關" %}

* <mark style="color:purple;">**position**</mark>: <mark style="color:blue;">`absolute`</mark> 的<mark style="color:orange;">定位子元素</mark>，它的 [top](https://lochiwei.gitbook.io/web/css/layout/top "mention"), bottom, left, right 是相對於自己的最近定位父元素的。
* [coordinates](https://lochiwei.gitbook.io/web/browser/concepts/coordinates "mention") of a [document](https://lochiwei.gitbook.io/web/browser/dom/type/document "mention") / [element](https://lochiwei.gitbook.io/web/browser/dom/type/element "mention").
* [coordinates](https://lochiwei.gitbook.io/web/browser/concepts/coordinates "mention") of <mark style="color:yellow;">**fixed**</mark> elements are relative to the [viewport](https://lochiwei.gitbook.io/web/browser/dom/type/window/viewport "mention").
* [modal dialog](https://lochiwei.gitbook.io/web/css/examples/modal-dialog)
* [Synth Keyboard](https://lochiwei.gitbook.io/web/js/proj/synth-keyboard)
* [.offsetparent](https://lochiwei.gitbook.io/web/browser/dom/type/element/+boxes/border/.offsetparent "mention") of an [htmlelement](https://lochiwei.gitbook.io/web/browser/dom/type/htmlelement "mention")
* [tooltip](https://lochiwei.gitbook.io/web/tools/tooltip "mention") 利用 <mark style="color:purple;">**`position`**</mark> 來定位
  {% endtab %}
  {% endtabs %}


---

# 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://lochiwei.gitbook.io/web/css/layout/position.md?ask=<question>
```

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.