※ 定位方法：position、z-index
position 定位方式：
說明：
- position是一個css裡面的樣式。
- 功能：讓你的元素可以自由定位。
position 有四個樣式的值：
說明：
static：是 HTML 元素的預設定位方式，不會因為設定 top、left 等位移屬性而改變位置。網頁原點在左上角是所有排版的起始點，網頁的y軸是往下。元素由上而下、由左至右地排列，如果不是block元素則會在同一行自然橫向排列，如 inline 或 inline-block。relative：常見的定位屬性。在全域設定時，若為所有元素統一指定 position: relative;，則這些元素便具備相對定位特性，成為其子元素使用 absolute 定位的參照點。
absolute：絕對定位。當元素設定為 position: absolute; 時，它會根據最近的已定位祖先元素（其 position 屬性為 relative、absolute 或 fixed）進行定位。若無符合條件的祖先元素，則會以 body 為參考點。
fixed：一種視窗定位方式。當元素設定為 position: fixed; 時，它會根據瀏覽器視窗（viewport）的位置進行固定，不隨頁面滾動而改變位置。常用於廣告區塊、浮動按鈕或固定導覽列等元件。
版面配置概念：
說明：
- 🟨 中央有一個黃色正方形，作為參考。
- ➡️ 粉紅色箭頭分別指出矩形的四個邊：上、下、左、右
- 🗂 每個方向都有對應的英文標籤，例如「top」代表上方。
- 📍 圖右下角有「參考點」的文字，暗示黃色正方形是定位的基準。
※ position範例：
1.建立position_example專案：
成果顯示：
2.relative範例：
index.html：
<body>
<div class="post relative">relative</div>
</body>
style.css：
/* 依照原本的自己的位置去做定位 */
.relative {
background-color: #fdd2b5;
position: relative;
top: 100px;
left: 100px;
}
成果顯示：
3.static範例：
index.html：
<div class="post static">static</div>
style.css：
.static {
background-color: #adcbc9;
position: static;
}
成果顯示：
4.absolute範例：
index.html：
<body>
<div class="post absolute">absolute</div>
</body>
style.css：
.absolute {
background-color: #f7a7a6;
position: absolute;
top: 0;
right: 0; /*定位在右上角*/
}
成果改變前顯示：
成果改變後顯示：
成果改變後顯示：
5.absolute協同relative範例：
index.html：
<body>
<div class="post absolute">absolute</div>
<div class="outter"></div>
<div class="post absolute">absolute</div>
</body>
style.css：
.outter {
width: 500px;
height: 500px;
border: 5px solid #000;
position: relative;/*在上一層設屬性*/
}
成果改變前顯示：
成果改變後顯示：
6.fixed範例：
index.html：
<body>
<div class="post fixed">fixed</div>
</body>
style.css：
/* 找視窗定位 */
.fixed {
background-color: #f48b94;
position: fixed;
/* 固定右下角 */
right: 0;
bottom: 0;
}
成果改變前顯示：
成果改變後顯示：
