絕對定位與相對定位實做範例
- 第六週 – 設計稿
- 第六週作業 Github pages
觀念重塑
- 要設定絕對定位與相對定位的兩個物件不可以在同一層,因
absolute
會找有設定relative
的父層當基準點,如果父層沒有relative
就會依 body 為基準點對齊。 - 如果 a 物件需要對齊 b 物件,那 a 物件就須位於 b 物件的子層。並於 a 物件使用
absolute
去以 b 物件的relative
當基準點。
D1. 購物車上的數量
<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 圖片上加遮照與文字
<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. 桌機與手機圖片與文字穿插&排版互換
// 桌機排版 ▲
// 手機排版 ▲
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 編輯器熱鍵。