# HTML(5/10) Day 11 五倍紅寶石(第八屆共筆)(2021/7/12)
## 定位：(一定要熟練)
Why?
想讓物件固定在一些特別的地方。

加了定位的物件會：
1. 優先顯示在上層
2. 後面寫的定位會更優先顯示在上層
3. 會讓物件變成 display:block (只限定fixed、absolute)

What?
控制我的物件在畫面當中，他要依據誰來做對齊、排列或是定在某個位置上。

How?
定位有哪幾種：
1. fixed(參考視窗)
2. relative(參考自己)
3. absolute(參考有定位的父層)
4. sticky(炫炮)
5. static(極少用)

### fixed:(固定)
這個**物件所佔據的區塊會被抽離**，自己獨立一層，並**待在原位**。
=> 頁面捲動時，他會永遠固定在**視窗範圍**內的某一位置。

### relative:(相對)
依據語言方向，相對於**自己**，在資料中的位置去做偏移，**做了偏移才會移動**。
=> 佔據那個位置，人跑去其他地方。(排隊時解壓縮的概念)

### absolute:(絕對)
這個**物件所佔據的區塊會被抽離**，自己獨立一層，**物件會在原本資料所在的位置**。
寫 trbl 後，**物件會往他的父層去做定位**，遇到父層有 fixed、relative、absolute、sticky都會被定住，**一旦找到就不會再繼續往更高層做定位了**，如果都沒有定位，最後會定到視窗。
=> 根據**視窗**範圍定位，只會定一次。

#### sticky:(混合體)
- 有 fixed 定在視窗上的特性
- 有 relative 佔據位置的特性
- 有 absolute 只能在父層移動的特性

#### static:把原本的定位清掉，清起來!

## 定位實用技巧：
- z-index 調整優先度。
- 用 top, right, bottom, left: 0 搭配 bgc 可以覆蓋整個畫面。
原理：因為使用定位時，如果沒有設定寬高，寬高會依據內容大小做預設，用 trbl: 0可以讓物件知道整體頁面的尺寸。
- 進階技巧：trbl: 也可以設定 % 來使用，left:50% = 距離視窗左邊一半的位置，也就是說只能使用右半邊。
- 如果trbl全都有寫，只會取left跟top的值。
- trbl : 0 搭配margin auto可以置中。
- fixed 適合在背後沒有畫面的時候使用。
- sticky 適合在背後有畫面的時候使用。

---

### Xmind：
[CSS指令](https://www.xmind.net/m/3G3G2Q)

---
###### tags: `HTML` `CSS`