iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 19
1
Modern Web

HTML 與 CSS 學習筆記系列 第 19

Day19 - Position (1) - 相對定位、絕對定位

相對定位與絕對定位

  • 可以用來應用在重疊
  • static:預設值,代表不會被定位,依照網頁預設排版
  • absolute:絕對座標,可放在整個網頁視窗的位置,挪動後原始區塊範圍不保留(跳出不同層的概念)
  • relative:相對座標,依照參照的區塊來設定,挪動後原始區塊範圍保留
  • 方向:在設定座標種類後,未設定方向時會以左上角為基礎點,座標點數值可以設定為負,進而產生交錯重疊效果
    • topbottom:上下
    • leftright:左右
  • 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; */
}

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

  • .headerposition: 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 繼續說明練習


上一篇
Day18 - Flex (5) - 並排選單
下一篇
Day20 - Position (2) - 固定定位
系列文
HTML 與 CSS 學習筆記31

尚未有邦友留言

立即登入留言