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

觀念重塑

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

D1. 購物車上的數量

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

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 圖片上加遮照與文字

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

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. 桌機與手機圖片與文字穿插&排版互換

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

// 桌機排版 ▲

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

// 手機排版 ▲

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>

資料來源

六角學院

最後修改日期: 30 12 月, 2020

作者