> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/css/layout/position.md).

# position

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