一个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类重叠（图片附加）

回答

相关问题