# CSS定位的五種方式(position tutorials)
###### tags: `Web` `Computer Science`
---
## position總共有五個屬性值
### * static
### * relative
### * fixed
### * absolute
### * sticky
---
## 1. static
  靜態定位，html中所有元素的預設position值為static，static的值會隨html的排版而移動，在static屬性值中設定top, bottom, right, left將不會作用。
> 示例：
```HTML=
<div class="height"></div>
<div class="static"></div>
```
```css=
.static{
position:static;
width:360px;
height:360px;
}
.height{
width:750px;
height:120px;
}
```
## 2. absolute
  絕對定位，元素會根據最近的一個父容器去定位，該父容器的postion屬性值必須是:relative, absolute, fixed其一。若沒有這樣的父元素，該元素則會相對於body進行絕對定位。
  絕對定位偏移值可以由top, bottom, left, right決定
  而絕對定位的元素若超過其父元素的邊界，可以隱藏其中溢出的部份，若要隱藏在哪個父元素中，該父元素的postion需為relative, absolute, fixed其中一種外，並且將overflow的值設為hidden。
>示例：
```go=
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="absolute"></div>
```
```css=
.height{
width:750px;
height:120px;
}
.absolute{
position:absolute;
width:240px;
height:240px;
right:80px;
bottom:60px;
}
```
  看上圖可以發現absolute定位不受heigt元素排版影響。
  試著在多做幾個height元素，讓頁面可以滾動，這時候可以發現absolute元素會隨著滾動軸滾動。
  接著，如果我們把absolute元素放到另個absolute元素中，會發現最裡層的子元素會根據父層的元素位置去做絕對定位，如上提及的**absolute屬性值會參考最近一個父元素容器去定位，該父元素position值必須為relative, absolute, fixed，若沒有這樣的父元素，則會根據body去定位。**
> 示例：
```go=
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="absolute">
<div class="absolute"></div>
</div>
```
```css=
.height{
width:750px;
height:120px;
}
.absolute{
position:absolute;
width:240px;
height:240px;
right:80px;
bottom:60px
}
```
## 3. relative
  相對定位，relative和static類似，都會隨著html的排版而移動，但相比於static，relative可以去設定top, bottom, right, left，即使他是跟著html預設排版移動，但還是可以透過調整top, bottom, right, left的值來調整位置
>示例：
```htmlembedded=
<div class="height"></div>
<div class="relative"></div>
```
```css=
.height{
width:750px;
height:120px;
}
.relative{
position:relative;
width:360px;
height:360px;
top:60px;
left:150px;
}
```
  可以從上圖看出，relative元素會隨著height的排版而浮動，而且也會根據top, left的設定而變更位置。
####   relative有一個重要的功能就是若在他的子元素中的定位若是absolute，則子元素會根據relative的位置去做定位。
>示例：
```go=
<div class="height"></div>
<div class="height"></div>
<div class="relative">
<div class="absolute"></div>
</div>
```
```css=
.height{
width:750px;
height:120px;
}
.relative{
position:relative;
width:360px;
height:360px;
top:60px;
left:150px;
}
.absolute{
position:absolute;
width:240px;
height:240px;
right:80px;
bottom:60px;
}
```
  上圖可以看出absolute中的元素，其right跟bottom屬性是根據父層的relative元素位置去定位的。
  若將relative元素替換成static元素，absolute元素將會忽略static元素，而去跟body定位。
>示例：
```go=
<div class="height"></div>
<div class="height"></div>
<div class="static">
<div class="absolute"></div>
</div>
```
```css=
.height{
width:750px;
height:120px;
}
.static{
position:static;
width:360px;
height:360px;
}
.absolute{
position:absolute;
width:240px;
height:240px;
right:80px;
bottom:60px;
}
```
## 4. fixed
  固定定位，fixed與absolute相似，不同地方有兩個點：
* fixed會固定在螢幕中的某個位置，即使滾動頁面，fixed區塊還是會處於那個位置。
* 如果在fixed元素中去社定top, bottom, right, left屬性，那即使他放在relative元素中，他還是會根據body去定位，而不是依據relative區塊位置去定位。
> 示例：
```go=
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="fixed"></div>
```
```css=
.height{
width:750px;
height:120px;
}
.fixed{
position:fixed;
width:240px;
height:240px;
left:80px;
bottom:60px;
}
```
  接著，我們嘗試把fixed元入放入父層屬於relative屬性的區塊中，並不去設定top, bottom, right, left屬性，會發現fixed元素會跟著父元素排版。
>示例：
```go=
<div class="height"></div>
<div class="relative">
<div class="fixed"></div>
</div>
```
```css=
.height{
width:750px;
height:120px;
}
.fixed{
position:fixed;
width:50px;
height:50px;
background-color:red;
}
.relative{
position:relative;
width:360px;
height:360px;
top:60px;
left:150px;
}
```
  但若fixed一設定top, bottom, right, left屬性後，那麼即使他放在relative父層中，fixed還是會根據body去做定位，而不是根據relative父層。
>示例：
```go=
<div class="height"></div>
<div class="relative">
<div class="fixed"></div>
</div>
```
```css=
.height{
width:750px;
height:120px;
}
.fixed{
position:fixed;
width:50px;
height:50px;
top:50px;
left:10px;
background-color:red;
}
.relative{
position:relative;
width:360px;
height:360px;
top:60px;
left:150px;
}
```
## 5. sticky
  黏性定位，算是css中較新的定位屬性，也可以說是在relative與fixed中的相切換。
  sticky主要用在對scroll事件的監聽，簡單來說，在滑動過程中若sticky元素距離某個父元素(無則是body)的距離達到要求時，就會由relative定位改為fixed定位。
>示例：
```go=
<div class="height"></div>
<div class="height"></div>
<div class="sticky"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
```
```css=
.height{
width:750px;
height:120px;
}
.sticky{
position:sticky;
width:240px;
height:90px;
top:0;
}
```
  這是頁面初始樣貌，當我們將卷軸往上移動，sticky區塊跑道頂部後，因為top設定為0的緣故，該區塊就會被固定在頂部。
>示例：
  
  若往下拖弋也會處在底部，可以用來設計導航欄的功能。
---
此篇文章參考自：https://segmentfault.com/a/1190000024418039
Sign in with Wallet
Connect another wallet