# top

[CSS](..) ⟩ [layout]() ⟩ top

{% hint style="info" %}
&#x20;<mark style="color:purple;">**`top`**</mark> 隨著不同的 [`position`](position) 設定，而有不同的效果：

* `absolute` or `fixed`： <mark style="color:yellow;">自己上方</mark> <mark style="color:orange;">outer margin</mark> 到<mark style="color:yellow;">父容器上方的</mark> <mark style="color:orange;">inner border</mark> 的距離。
* `relative`：自己 (從正常位置) <mark style="color:yellow;">往下移動</mark>的距離。
* `sticky`： `top` property is used to compute the <mark style="color:orange;">sticky-constraint rectangle</mark>.
* `static`： `top` <mark style="color:red;">無效果</mark>。
{% endhint %}

{% tabs %}
{% tab title="💾 程式" %}
```css
/* top: 父元素的 top 到自己的 top 的距離 */
top: 125%;    /* 100% 代表父元素的高度 */
```
{% endtab %}

{% tab title="👥 相關" %}
* [position](position "mention"): <mark style="color:blue;">`absolute`</mark> 的<mark style="color:orange;">定位子元素</mark>，它的 <mark style="color:purple;">**`top`**</mark>, bottom, left, right 是相對於自己的[最近定位父元素](position/positioned-ancestor)的。
{% endtab %}

{% tab title="📘 手冊" %}
* [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) ⟩ [top](https://developer.mozilla.org/en-US/docs/Web/CSS/top)
* [anchor positioned elements](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning/Using)&#x20;
{% endtab %}
{% endtabs %}

