---
# System prepended metadata

title: Position 定位
tags: [ALPHACampWeek2]

---

###### tags:`ALPHACampWeek2`

Position 定位
===
[校長要宣傳的頁面-所有position屬性使用之範本](https://codepen.io/ks0dcongra/pen/oNGJggr)

Position 
---
![](https://i.imgur.com/wIdhiec.png)

![](https://i.imgur.com/SVs0SnW.png)
- 靜態定位 position: static
乖乖牌少年：Static
![](https://i.imgur.com/wyamdDp.png)

- 相對定位 position: relative
一般少年：Relative
![](https://i.imgur.com/UnKPesN.png)

- 絕對定位 position: absolute
狂妄少年：Absolute
此元素就會跳脫頁面流， 在頁面流中不佔有空間。
![](https://i.imgur.com/L7e2AJg.png)


- 固定定位 position: fixed
猖狂少年：Fixed
此元素就會跳脫頁面流， 在頁面流中不佔有空間。
![](https://i.imgur.com/ESbJA2c.png)

- 黏黏的相對定位 position: sticky
舔狗少年: Sticky
當綠色方塊碰到 scrolling ancestor，也就是 container 的時候，就會「黏在」他上面。當然「黏的」的位置，可以透過 top, right, bottom, left 來決定。

z-index 增加另一個維度
---
z-index 來定義元素的層級，愈大的數字會放在愈上層，愈小的數字會放在愈下層，而視窗位於 0 的位置。
![](https://i.imgur.com/VwLmjOQ.png)![](https://i.imgur.com/4wIRfEF.png)

