一個CSS類與另一個CSS類重疊（圖片附加）

我正在創建一個電子商務網站。在顯示折扣框的同時，該項目的圖像向左移動（下圖）。我想要項目類頂部的折扣框（藍色）。誰能幫我這個？一個CSS類與另一個CSS類重疊（圖片附加）

CSS文件

div.item 
{ 
    margin-top:0px; 
    padding-top:20px; 
    text-align:center; 
    width:160px; 
    float:left; 
    border:1px solid red; 
} 

div.discount 
{ 
    width:30px; 
    height:30px; 
    border:1px solid blue; 
    float:right; 
    margin-right:30px; 
    margin-top:10px; 
}

HTML文件

<div class="item"> 
    <img src="items/1/s/a.jpg"/> 
    <div class="discount"> 
      50% discount 
    </div> 
</div>

我的例子 - 藍色框圖像不重疊。相反，它取代了圖像。

enter image description here

我想是這樣的：在折扣箱重疊的圖像/ CSS類

enter image description here

來源

2011-07-18 Sumit Gupta

哪裏是「打折盒子」第二形象嗎？ – Nivas

@Nivas：橙色圓圈 –

嘗試定位項目DIV

內降價標籤絕對

div.item 
{ 
    margin-top:0px; 
    padding-top:20px; 
    text-align:center; 
    width:160px; 
    border:1px solid red; 
    position :relative; 
} 

div.discount 
{ 
    width:30px; 
    height:30px; 
    border:1px solid blue; 
    position: absolute; 
    top: 20px; 
    left: 20px; 
}

來源

2011-07-18 14:54:00 pleunv

您可以在頂部div上使用z-index和絕對定位。喜歡的東西：

div.discount 
{     
    width:30px; 
    position: absolute; 
    z-index: 10; 
    top: 8px; 
    right: 8px; 
    height:30px; 
    border:1px solid blue;   
}

你也可以用百分比，而不是像素的頂部和右側，以使其更加靈活一點。

編輯：您還必須將position: relative添加到div.item（絕對位置基於最接近的包含元素並應用位置）。

只要您想要的東西出現在代碼底部的東西之前，z-index就不是必須的。我有時候喜歡把它放在那裏以防萬一以後事情會變動。

來源

2011-07-18 14:54:08 Damon

只有當'div.item'設置爲'position：relative'時，這纔會有效。 – shanethehat

非常真實。接得好！我相應地編輯了我的答案 – Damon

您可以使用絕對定位將藍色框放在頂部，只要確保父元素設置爲position:relative即可。

div.item 
{ 
    margin-top:0px; 
    padding-top:20px; 
    text-align:center; 
    width:160px; 
    float:left; 
    border:1px solid red; 
    position:relative; 
} 

div.discount 
{ 
    width:30px; 
    height:30px; 
    border:1px solid blue; 
    position:absolute; 
    right:30px; 
    top:10px; 
}

來源

2011-07-18 14:54:49 shanethehat

div.item { position:relative; } 
div.discount { position:absolute; top:-5px; left: -5px; }

來源

2011-07-18 14:55:13 adlawson

這事很快我提出了，應爲你工作：JsFiddle Demo

來源

2011-07-18 14:56:56 Phil

一個CSS類與另一個CSS類重疊（圖片附加）

回答

相關問題