相對定位與絕對定位

• 可以用來應用在重疊
• static：預設值，代表不會被定位，依照網頁預設排版
• absolute：絕對座標，可放在整個網頁視窗的位置，挪動後原始區塊範圍不保留(跳出不同層的概念)
• relative：相對座標，依照參照的區塊來設定，挪動後原始區塊範圍保留
• 方向：在設定座標種類後，未設定方向時會以左上角為基礎點，座標點數值可以設定為負，進而產生交錯重疊效果
  • top、bottom：上下
  • left、right：左右
• z-index：當 2 個區塊重疊時，原則是後來的會蓋過之前的，若想要把之前的呈現出來，則需要設定 z-index，當值愈大會放在最上面一層
  • z-index: 9 會呈現在 z-index: 5 的上層

<div class="header">
    <div class="box"></div>
</div>

參考下面程式碼，比較差異

• 預設的狀況以及 position 設定絕對與相對的差異
  • 顯示位置應該都相同
• 解除方向的註解，比較預設的狀況以及絕對與相對的差異
  • 預設沒有改變，絕對改至右上，相對改至左上，並且左邊因為移動會被切掉(暫時還不知道為什麼在左邊)

.header {
    width: 300px;
    height: 200px;
    border: 1px solid red;
    /* position: absolute; */
    /* position: relative; */
    /* right: 20px;
    top: 40px; */
}

增加其子區塊，參考下面程式碼，比較差異

• 在 .header 的 position: relative;，其 .box 設定 position: absolute; 時，會以 .header 的區塊大小來當作其絕對座標的範圍
• 可以比對 .box 在絕對與相對時的位置差異

.header {
    width: 300px;
    height: 200px;
    border: 1px solid red;
    position: relative;
    right: 20px;
    top: 40px;
}

.box {
    width: 100px;
    height: 100px;
    background: blue;
    /* position: absolute; */
    position: relative;
    left: 20px;
    bottom: 10px;
}

參考資料

• 關於 position 屬性
• CSS relative? absolute? 傻傻分不清楚
• 10步掌握CSS定位: position static relative absolute float
• 前端新手村 Position 定位

次回

再對 Position 繼續說明練習