# CSS - Position
###### tags: `HTML-CSS`
### (一) . Position 的概念
1. 功用 ： 定位，將元素定位在固定的位置。
2. 特殊屬性 ：
- position ： 必需設定的屬性。
- right left top bottom : 定位位置。

### (二) . static
1. 效果 ： 原本的排版效果。
- 系統預設的定位。
2. 特殊屬性 ： 此時設定什麼都沒有用。

### (三) . relative
1. 效果 ： 對於父元素時的static，相對位移多少。
- 此時的特殊屬性的值，為相對static情況的位移。
- **仍會佔去static的空間。**

2. 特殊屬性 ： 此時設定的四個特殊屬性，為 ：
- top :
- right :
- left :
- bottom :

### (四) . absolute
1. 效果 ： 對於父元素的四個邊界的絕對位置。
- 此時的特殊屬性的值，為對父元素的絕對位置。
- **不會佔去static的空間，會相對父元素進行位移。**
- **可能會造成元素重疊。**
2. 特殊屬性 ： 此時設定的四個特殊屬性，為 ：
- top :
- right :
- left :
- bottom :

3. **注意 ： absolute尋找的父元素的屬性有要求。**
- 父元素必須要有```relative、fixed、inherit```等等屬性，採可以被```absolute```的元素定位。
- 若父元素沒有，就會一直向上尋找，直到body。
- 因此，很有可能直接被貼在body上。

### (五) . fixed
1. 效果 ： 對於視窗(document)的四個邊界的絕對位置。
- 此時的特殊屬性的值，為視窗(document)的絕對位置。
- **不會佔去static的空間，會直接浮起來。**
- **可能會造成元素重疊。**
2. 特殊屬性 ： 此時設定的四個特殊屬性，為 ：
- top :
- right :
- left :
- bottom :

### (六) . z-index屬性
1. 功用 ： 在多個可能元素重疊下，可以指定出現的權重。
2. 效果 ： 常常可以用負的相對邊界或是```padding```或```margin```去設定。