絕對定位與相對定位實做範例

• 第六週 – 設計稿
• 第六週作業 Github pages

觀念重塑

• 要設定絕對定位與相對定位的兩個物件不可以在同一層，因 absolute 會找有設定 relative 的父層當基準點，如果父層沒有 relative 就會依 body 為基準點對齊。
• 如果 a 物件需要對齊 b 物件，那 a 物件就須位於 b 物件的子層。並於 a 物件使用 absolute 去以 b 物件的 relative 當基準點。

D1. 購物車上的數量

Codepen 範例

<a class="position-relative" href="#">
  <i class="fas fa-shopping-cart fa-3x"></i>
  <span class="cartQuantity">3</span>
</a>

• .cartQuantity 設定 absolute 以 a 連結的 relative 為基準點。

D2. img 圖片上加遮照與文字

Codepen 範例

<div class="position-relative d-inline-block">
  <img>
  <p class="position-absolute soldout">Sold out</p>
</div>

• absolute 如果父層沒有設定 relative，就會以 body 為基準點。
  金魚腦一度一直在同層的 img 設定 relative 難怪沒反應 ，冏 !

• img 與 sold out 外面包一個父層設定 relative 讓 absolute 對齊，
  sold out 文字對齊可使用右方 transform 屬性。而圖片上方的深灰色遮罩
  使用 filter 屬性，不需要使用絕對與相對定位，直接寫 class 在要套用的 html 標籤上即可。

  filter:brightness( 數值%);
  
  transform:translate(-50% , -50%);
  top:50%;
  left:50%;
  white-space: nowrap;
  

• 因為 div 為區塊元素，所以加上 inline-block 防止 sold out 文字位置跑到 div 整個寬度的中間。可拿掉 div 的 inline-block 試試。

D3. 桌機與手機圖片與文字穿插＆排版互換

// 桌機排版 ▲

// 手機排版 ▲

Codepen 範例

step1. row col 區塊分配

<div class="row">
    <div class="col-md-8">第一張圖</div>
    <div class="col-md-4">右方文字</div>
    <div class="col-md-8">
        <div class="row"> 再依最後三張圖片的所佔欄數分配 .col，.col 裡面放圖片 </div>
    </div>
</div>

• 第一張圖片與右方文字各使用 .col-md-8 與 .col-md-2，因為 BS 為 12 欄所以桌機時會顯示並排，而 md 斷點以下則會變上下兩排。
  • （ .col-12 不需再另外寫是因為 .col-md-8 表示 md 斷點以上以 .col-md-8 呈現，以下沒有特別寫就是以 12 欄呈現。 ）
• 下面三張圖片以 .col-md-8 包覆，用 .col-md-8 是為了與第一張圖片等寬，且桌機時不會遮到右方文字。
  • 再依最後三張圖片的所佔欄數分配 .col，.col 裡面放圖片

step2. 文字區域使用絕對定位與相對定位

• 桌機時右方文字也佔一個空間，所以文字太長時後三張圖片會被往下推。
• 讓文字區塊使用 absolute 對齊 .row ( 加上 relative ) ，另外文字區塊可使用 left 來靠右對齊。
  • 使用絕對定位的文字區塊會失去空間，下方的三張圖片就不會因為右方文字太長被往下推，。
• 因為 BS 的 postion 沒有設定斷點，所以自行客製 .position-absolute-md-right ，讓文字區塊於 md 以上為絕對定位並靠右。

<div class="row position-relative">
    <div class="col-md-8">第一張圖</div>
    <div class="col-md-4 position-absolute-md-right">右方文字</div>
    <div class="col-md-8">
        <div class="row"> 再依最後三張圖片的所佔欄數分配 .col，.col 裡面放圖片 </div>
    </div>
</div>

資料來源

六角學院

• 網頁切版直播班-2020秋季
• 第六週 – 設計稿 ( 圖片空間 week6 資料夾 )
• web layout training gulp master 資料夾 ( 使用 EJS 編譯 layout )
• emmet 熱鍵中文表、VS Code 編輯器熱鍵。