position 是指定一个元素在定位方式,也就是元素放置的位置
可以用來應用在元素重疊
<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;
}