根據我目前的理解，在 CSS 的世界裡，許多常見的區塊元素預設會從上到下，像疊積木一樣垂直堆疊。
不過好像可以打破這個規則！主要靠這兩個核心：

1. display：切換盒子的排列性格

• display: block;：獨佔一整行。
• display: inline-block;：可以跟其他元素並排，也能設定寬高。
• display: flex;：能讓裡面的元素橫向彈性排列。

2. position：圖層的精準定位
如果想讓某個東西「跳出來」，例如在商品卡片的右上角貼一個「HOT」標籤，就會用到定位：

• position: relative;：設定為定位基準點。
• position: absolute;：相對於基準點，用 top、right 等數值精準釘在畫面上。

/* 讓標籤精準定位在卡片右上角 */
.card {
    position: relative; /* 宣告我是基準點 */
}
.tag-hot {
    position: absolute; /* 自由定位 */
    top: 10px;
    right: 10px;
}

這讓我第一次有了在網頁裡「整理小物件」的掌控感！能很有邏輯地安排元件層次！ Day 20，掌握了 Display 與 Position 的定位思維。