一起幫忙解決難題,拯救IT 人的一天 | css位置
上面商品圖片的hot可以跟圖片重疊,這是float絕對做不到的事情,需要透過絕對定位來處理原理:在外層新增div(Product_block_hot)並設為相對定位(relative)讓hot區塊只能在該範圍內移動,但hot區塊要設為絕對定位(absolute)才有效。hot區塊再用top、bottom、left、right後面加上數值調整位置HTML:
上面商品圖片的hot可以跟圖片重疊,這是float絕對做不到的事情,需要透過絕對定位來處理
原理:
在外層新增div (Product_block_hot)並設為相對定位(relative)讓hot區塊只能在該範圍內移動,但hot區塊要設為絕對定位(absolute)才有效。 hot區塊再用top、bottom、left、right後面加上數值調整位置HTML:
<div class="Product_block_hot"> <span class="Product_hot_icon">Hot</span> <img src="product_1.png" alt=""> </div>CSS:
.Product_block_hot{ position: relative;//設為相對定位(relative) text-align: center; border:2px solid black; } //hot紅色區塊 .Product_hot_icon{ position: absolute;//設為絕對定位(absolute) font-weight: bold; top: 0px; right : 0px; //右邊上面都設0,則出現在右上方 color: white; display: block; background: red; width: 40px; height: 19px; text-align: center; }結果如下:
就算把圖片刪除,新增div 背景設為綠色也是同樣
<div class="Product_block_hot"> <span class="Product_hot_icon">Hot</span> ...