# [CSS] 絕對/相對定位設計版型

###### tags: `CSS`

* absolute 元素的定位是在他所處上層容器的相對位置
* 如果沒有寫relative對應，則會依照瀏覽器預設的寬高為基準
* 若要頁面「並排」可使用float，「重疊」可用相對定位語法


---

### 單使用relative及absolute的解析

* Css單純設定一組relative，則box會以class目前所在的位置做移動(top:20px)

* 單設定一組absolute，會以body裡為範圍做位置上的移動，因此在設定一組absolute前，我們常常會需要先新增一組relative當作外框架的基準，才能在目前的區塊去做移動而不是整個大body

---
<h3>z-index:數值設定重疊的順序</h3>

box1:z-index=10
box2:z-index=9
結果：box1會重疊在box2區塊上方

---