這幾天已經介紹過多個元素排列橫向排列、垂直排列，以及換行的機制，今天再來說說「排序」的機制。排序顧名思義，就是將順序進行排列。原本的預設是將先輸入的元素先顯示，例如我在網頁中由上而下輸入盒子一、盒子二、盒子三，網頁中由上而下出現的順序也會是盒子一、盒子二、盒子三。排序的目的在於打亂此順序，可以依照自己的喜好將網頁元素進行排序。

觀察排序的網頁建置

首先先製作一個大盒子，裡面放8個小盒子，可參考以下的HTML語法。

HTML網頁結構

網頁結構這邊要留意的是，所有小盒子的class是獨立的，每個盒子的class名稱是不同的例如box1、box2等，這邊使用id來定義也可以。

<div class="box">
  <div class="box1"> 1 </div>
…
  <div class="box8"> 8 </div>
</div>

CSS語法：子元素的定義

這邊只以box1為例，box1至box8請都套上一樣的外觀，請參考以下語法：

.box1{
  font-size:24px;
  margin:5px 5px 20px;
  text-align:center;
  line-height:30px;
  width: 30px;
  height: 30px;
  color:white;
  background-color: rgba(0,200,200,1);
}

這邊每個小盒子都要有獨立的class，以利於後續排序。

觀察order的變化

這邊要使用order的語法進行排序，order的語法相當簡單，只要將小盒子的CSS語法中加上「order:數字」即可排序，數字愈大的會排在越後面。這邊值得注意是，沒有order語法的class預設值為0，order可以設定負數，可參考以下CSS語法：

order: 1;
order: -21;

CSS的order語法範例

根據前述的內容，我們將order加入CSS語法當中，語法呈現一樣以box1為例：

.box1{
  order:8;
  font-size:24px;
  margin:5px 5px 20px;
  text-align:center;
  line-height:30px;
  width: 30px;
  height: 30px;
  color:white;
  background-color: rgba(0,200,200,1);
}

order範例結果呈現

依照前面的order語法，將八個子元素全面排序後，可達到以下效果，可參考下圖：

z-index的次序變化

另外一個與排序有關的部分就是z-index，當元素重疊時，z-index數字越大，就會在越上面，在後續製作特效與動畫時是相當重要的語法，這邊可以先接觸該語法並且試玩看看，相關範例如下。

HTML網頁結構

  <div class="box9"> 9 </div>
  <div class="box10"> 10 </div>
  <div class="box11"> 11 </div>

CSS語法：子元素的定義

再來是CSS語法，相關成果如下圖所示，z-index一樣可以用負數：

.box9{
  z-index:3;
  position: absolute;
  font-size:24px;
  margin:5px 5px 20px;
  text-align:center;
  line-height:30px;
  width: 30px;
  height: 30px;
  color:white;
  background-color: rgba(200,200,200,1);
}

.box10{
  z-index:2;
  position: absolute;
  font-size:24px;
  margin:5px 5px 20px;
  text-align:center;
  line-height:60px;
  width: 60px;
  height: 60px;
  color:white;
  background-color: rgba(255,200,0,1);
}

.box11{
  z-index:1;
  position: absolute;
  font-size:24px;
  margin:5px 5px 20px;
  text-align:center;
  line-height:120px;
  width: 120px;
  height: 120px;
  color:white;
  background-color: rgba(0,200,200,1);
}

z-index範例結果呈現

將box9、box10、box11套上樣式後會呈現以下結果：

範例參考

以下範例為今天說明內容的實作頁面，有order演示與z-index演示，請參考：
https://codepen.io/hamagawa76/pen/oNqJGPR

目前已經有說明橫向的排列與垂直排列、換行的機制以及排序的部分，可以嘗試同時使用這幾種語法，觀察物件的變化。依照目前所教的部分已經可以完成靜態網頁的排版了。

是不是很簡單！明天會說明Boostrape 5排版的部分了，我們明天見囉！