# CSS 28. position - relative 相對的

- 如何開始產生 position: relative ?

### 沿用 CSS 27. 章節最後的 code

- 針對想要控制的 box，下關鍵字: `position: relative;`

// 例如我當下要控制 box2: 由左邊推擠至右邊: 100px

.box2 {
  background: #ffebcd;
  position: relative;
  left: 100px;
}


---

### 實現漸層語法，z-index:


- box3 透過 position 覆蓋了 box2，但我想要解決被覆蓋的問題，該如何撰寫程式碼?

.box2 {
  background: #ffebcd;
  position: relative;
  left: 100px;
}

.box3 {
  background: #adff2f;
  position: relative;
  bottom: 100px;
}

- 此時可以針對 box2 設定 z-index level:

.box2 {
  background: #ffebcd;
  position: relative;
  left: 100px;
  
  // 設定 z-index level:1
  z-index: 1; 
}

.box3 {
  background: #adff2f;
  position: relative;
  bottom: 100px;
}

- 設定完成之後，box2 再次覆蓋掉了 box3，可根據此邏輯判斷，當設定值越高時，則會越高。


### 未設定 position 類型時，z-index 會沒效:

- box1，若沒去設定 position 效果時，這時候去撰寫 z-index
會發現小盒子完全無動靜，是因為預設的 static 靜態效果所導致。

###### tags: `2022 網頁開發全攻略教程 / CSS篇章 - position`