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