###### tags: `前端小天地|CSS`

# position 常用值說明

static (靜態定位)
---
> 默認值，一般元素預設值。[color=#7BD4ED]
> 不能使用 top、right、bottom、left移動元素
:::danger
注意：值要寫單位(%、px)，否則效果不會顯示，例如：right: 25%。
:::

relative (相對定位)
---
> 可使用==top==、==bottom==、==right==、==left== 移動元素，但是relative是相對於自身初始值進行偏移，所以沒有定義(top、bottom、right、left)也會有效果，會隨著捲軸滾動，從左上角開始。[color=#FF9100]

absolute (絕對定位)
---
> 父元素為relative的內層元素做定位使用，用==top==、==bottom==、==right==、==left== 移動元素，但是absolute是相對於最近的已定位元素做偏移，所以沒有定義(top、bottom、right、left)也會有效果，從父元素relative左上角開始。[color=#7BD4ED]
:::info
若父元素沒有relative，會從當前位置左上角開始。
:::

fixed (固定定位)
---
> 讓元素固定在指定的位置，不會隨著卷軸變動，用==top==、==bottom==、==right==、==left== 移動元素，從左上角開始。[color=#FF9100]
:::success
常見用法：置頂鈕。
:::

sticky (黏性定位)
---
> 會在特定的滾動位置變為固定定位，會被其他元素影響，寬度預設100%，用==top==、==bottom==、==right==、==left== 移動元素，至少要定義一個屬性，從左上角開始。[color=#FF9100]
:::success
常見用法：導覽列置頂。
:::