# 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`