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