以下這一段程式碼會長出不同大小及顏色的四塊積木

...
<div class="container">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
    <div class="d">D</div>
</div>
...

div{
    font-size: 50px;
    text-align: center;
}

.a{
    width: 300px;
    height: 100px;
    background: wheat;
}

.b{
    width: 200px;
    height: 100px;
    background: red;
}

.c{
    width: 100px;
    height: 100px;
    background: blue;
}

.d{
    width: 50px;
    height: 200px;
    background: blueviolet;
}

成這樣的四塊肌積木，我想把他全部塞在一起，
也就是讓他們由相同的地方長出來

這時後就要用到一種定位(position)的技巧，絕對定位

絕對位置 position: absolute

絕對定位這名詞可能會讓人誤以為：使用了絕對定位，就會定在瀏覽器上面的某一個地方，
到死元素都會定在那個地方不會動

但並不是如此，
絕對定位只是一種定位方式，要搭配相對定位點才會起作用

可以想像有一隻英雄角色，他造出了一個分身，
這隻分身會固定在本尊的右側三公尺旁
當本尊往前移動一段距離時，分身也會同時跟著往前移動一段距離
那我們可以說這個分身 使用的就是絕對定位 (就是跟屁蟲啦)
而本尊就是相對定位點

設定絕對定位元素 absolute

召喚分身 -- 跟屁蟲之術

position: absolute;

設定相對定位元素 relative

設定相對定位點 (定位本尊的位置)

position: relative;

我們把父層容器設定成relative、並把所有類別都掛上一個absolute
來看看會有什麼變化

.container{
    position: relative;
}

.container{
    position: relative;
}

.a{
    width: 300px;
    height: 100px;
    background: wheat;
    position: absolute;
}

.b{
    width: 200px;
    height: 100px;
    background: red;
    position: absolute;
}

.c{
    width: 100px;
    height: 100px;
    background: blue;
    position: absolute;
}

.d{
    width: 50px;
    height: 200px;
    background: blueviolet;
    position: absolute;
}

哇，這次全部的積木果然就從原點(相對定位點)的地方開始長！

那如果只放absolute在A積木身上，並拿掉其他三個積木的absolute，
會發生什麼事情
(由於積木B會被A蓋住，我稍微調整一下B的尺寸)

.a{
    width: 300px;
    height: 100px;
    background: wheat;
    position: absolute;
}

.b{
    width: 700px;
    height: 300px;
    background: red;
}

這次A方塊從原點(最左上方)開始長、B方塊也從原點(最左上方)開始長
看的出來，
原本的積木就長原本自己的、而積木A(絕對定位)就長分身的

靜態定位 static

原本的就長原本的，意思是static就長static自己的，而不受absolute影響
靜態定位(static)是網頁預設的定位方式。

position: static;

透過rgba設定透明度的方式，讓圖層彼此間多少能看的見
再同時讓積木A與積木B掛上absolute

.a{
    width: 300px;
    height: 100px;
    background: rgba(245, 222, 179, 0.5);
    position: absolute;
}

.b{
    width: 700px;
    height: 300px;
    background: rgba(255, 0, 0, 0.1);
    position: absolute;
}

.c{
    width: 100px;
    height: 100px;
    background: rgba(0, 0, 255, 0.8);
}

.d{
    width: 50px;
    height: 200px;
    background: rgba(138, 43, 226, 1);
    position: static;
}

積木A、B都透過分身的方式，從原點開始長
積木C則是用原本預設static方式，從原點開始依序排、再來才排到積木D

圖層堆疊順序 z-index

• z-index 數字越大蓋在越上層
• z-index 可以為負數
• z-index 預設值為0

拿剛剛的絕對定位來展示z-index效果說明

.container{
    position: relative;
}

.a{
    width: 300px;
    height: 100px;
    background: wheat;
    position: absolute;
    z-index: 1;
}

.b{
    width: 200px;
    height: 100px;
    background: red;
    position: absolute;
}

.c{
    width: 100px;
    height: 100px;
    background: blue;
    position: absolute;
}

.d{
    width: 50px;
    height: 200px;
    background: blueviolet;
    position: absolute;
}

先後順序 order

在 display:flex 或者 display:grid 的情況下，
可以透過CSS中的order屬性來改變同層元素間DOM元素顯示的先後順序
改變元素的排列順序，可以增加排版上的使用彈性
適合用在RWD畫面縮小時、變換成手機版元件排版的順序
(order僅對視覺呈現的順序產生作用，不會影響元素排列邏輯)

• order數字最小的會先顯示出來、數字越大排在越後面
• order可以為負數
• order預設值為0
• order值相同時，會按原先DOM順序補上

...
<div class="container">
    <p id="p1"> 1 lorem10(按tab)</p>
    <p id="p2"> 2 lorem20(按tab)</p>
    <p id="p3"> 3 lorem50(按tab)</p>
    <p id="p4"> 4 lorem100(按tab)</p>
</div>
...

.container{
    display: flex;
}

p:first-letter{
    font-size: 50px;
}

#p1{

}

#p2{
    order: 0;
}

#p3{
    order: 5;
}

#p4{
    order: -1;
}