上面商品圖片的hot可以跟圖片重疊,這是float絕對做不到的事情,需要透過絕對定位來處理
原理:
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>
<div class="color" style="width:300px;height:240px;background-color:green;">
</div>
</div>
結果如下:
z-index也是搭配絕對定位的重要語法,上面的例子再加上本日推薦的區塊
未加上前效果如下:
HTML:
<div class="Product_block_hot">
<span class="Product_hot_icon">Hot</span>
<div class="color" style="width:300px;height:240px;background-color:green;">
</div>
<div class="title">本日推薦</div>
</div>
CSS:新增本日推薦css
.title {
position: absolute;
width: 300px;
height: 20px;
background: blue;
color: white;
font-weight: bold;
top: -10px;
}
如果想要讓本日推薦藍色區塊移到hot上面可在這兩個css加入z-index,後面數字越大則越在上面
CSS:
.Product_hot_icon{
z-index: 18;
position: absolute;
font-weight: bold;
top: 0px;
right : 0px;
color: white;
display: block;
background: red;
width: 40px;
height: 19px;
text-align: center;
}
.title{
z-index: 19;//數字越大越上層
position: absolute;
width: 300px;
height: 20px;
background: blue;
color: white;
font-weight: bold;
top: -10px;
}
結果如下: