CSS 29. position - absolute / 絕對的

position 的 normal flow:

• 一般來說，再不設定 position 時，HTML 元素會根據瀏覽器的畫面大小，由左至右邊，由上至下去排列所有的「元素」。

• 本節要講節 positon: absolute

1. 範例中有三個 box，在黑色區域內

2. 針對前面所提及的: 一般來說所有元素都會遵循物件自身的 display 規則來排列，例如 box 都是 display: block;

3. 針對 box3 - 綠色盒子，設定 position: absolute;
   並給予其參數：

.box3 {
  position: absolute;
  top:0;
  right:0;
  background: green;
}

• 會發生下列情況:

1. 為什麼綠色盒子會出現在右上角呢？

• 這是因為，當下所有的盒子的上層都未有設定所謂的 position
  故會以最外層 –> HTML 標籤為基準，來設定其位置。

• position: absolute 會以其設定的方向性，來推擠其物件。

2. 假設設定右邊: 10px，則是以右邊向左推擠10px。以此類退。

---

• 如何讓盒子乖乖的待在黑色區塊呢？

// 針對容器或目標區域設定：

.container {
    position: relative;
}

• 當容器被設定由 static –> relative 之時:

  其內部子元素 – box 所設定的 absolute 絕對位置，會 for
  container 區域內。 – (黑色方框)

.box3 {
  position: absolute;
  top:0;
  right:0;
  background: green;
}

• 結語：若想要讓物件按照自己設定的方向所擺放，要在目標容器由 static -> relative 在針對個別元素設定其 absolute 以上下左右來控制其推擠位置。

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