###### tags:`ALPHACampWeek2`

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

Position
---

- 靜態定位 position: static
乖乖牌少年：Static

- 相對定位 position: relative
一般少年：Relative

- 絕對定位 position: absolute
狂妄少年：Absolute
此元素就會跳脫頁面流， 在頁面流中不佔有空間。

- 固定定位 position: fixed
猖狂少年：Fixed
此元素就會跳脫頁面流， 在頁面流中不佔有空間。

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

z-index 增加另一個維度
---
z-index 來定義元素的層級，愈大的數字會放在愈上層，愈小的數字會放在愈下層，而視窗位於 0 的位置。