# CSS 27. position - static 靜態的(default)

- CSS position 在預設的屬性值共有5個:

1. static
2. relative
3. absolute
4. Fixed
5. Sticky

- 在一般情況下，任何的 HTML 元素，再不做任何的 CSS 設定時
所存在的當下位置都會是 `static`。

- 延續 static 的議題，來複習 inline & block 的預設排法:

1. `inline` - **左至右**。
2. `block` - 佔據一整行，**上至下**。

### 實際案例操作:

- 這裡有一個 **container** 容器，裡頭有三個 div 名為 box
可以看見 `div` 作為一個 `block` 設定來說，確實: 3個盒子也就乖乖的從上到下了。


<div class="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

div.container {
  padding: 5px;
  width: 500px;
  height: 3000px;
  background: #000;
}

.box {
  width: 200px;
  height: 200px;
}

.box1 {
  background: #00FFFF;
}

.box2 {
  background: 	#ffebcd;
}

.box3 {
  background: 	#adff2f;
}

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