---
description: ╱🚧 under construction
---

# position

[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>：參考[最近定位父元素](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](../../browser/concepts/coordinates "mention") of <mark style="color:yellow;">**fixed**</mark> elements are relative to the [viewport](../../browser/dom/type/window/viewport "mention").
* [coordinates](../../browser/concepts/coordinates "mention") of <mark style="color:yellow;">**absolutely positioned**</mark> elements are relative to the [document](../../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](top "mention"), bottom, left, right 是相對於自己的最近定位父元素的。
* [coordinates](../../browser/concepts/coordinates "mention") of a [document](../../browser/dom/type/document "mention") / [element](../../browser/dom/type/element "mention").
* [coordinates](../../browser/concepts/coordinates "mention") of <mark style="color:yellow;">**fixed**</mark> elements are relative to the [viewport](../../browser/dom/type/window/viewport "mention").
* [modal dialog](../examples/modal-dialog)
* [Synth Keyboard](../../js/proj/synth-keyboard)
* [.offsetparent](../../browser/dom/type/element/+boxes/border/.offsetparent "mention") of an [htmlelement](../../browser/dom/type/htmlelement "mention")
* [tooltip](../../tools/tooltip "mention") 利用 <mark style="color:purple;">**`position`**</mark> 來定位
{% endtab %}
{% endtabs %}
