※ z-index：
說明：在瀏覽器的排版邏輯中，網頁不是一個平面結構，它實際是建立在一個三維空間模型上，所以網頁是立體的。在這個空間中，除了水平（X 軸）與垂直（Y 軸）方向外，Z 軸代表了元素在前後位置上的疊加關係。z-index可以幫助我們調整網頁的層級。當多個元素在視覺上「重疊」時，調整 z-index 能有效解決常見的排版問題。
※三維座標系統，幫助理解螢幕、使用者與空間軸線之間的空間關係
說明：- X軸（粉紅色）：水平延伸向右，通常代表左右方向。
- Y軸（藍色）：垂直向下，代表上下方向。
- Z軸（綠色）：斜向前方延伸，象徵螢幕之外的深度方向（也就是離視窗使用者的遠近）。
※ z-index 層級規則：
規則一：
.static {
background-color: #adcbc9;
position: relative;
}
<body>
<div class="post relative">relative</div>
<div class="post static">static</div>
</body>
說明：
在HTML中post static比post relative還晚寫，所以套用規則一。
成果顯示：
讓橘色卡片變成上層：
.relative {
background-color: #fdd2b5;
position: relative;
top: 100px;
left: 100px;
/* 高出一層 */
z-index: 1;
}
成果顯示：
※ z-index 屬性：
