一个CSS类与另一个CSS类重叠（附图像）

Question

我正在创建一个电子商务网站。在显示折扣框时，项目的图像向左移动（下图）。我想在商品类的顶部打折（蓝色）。任何人都可以帮我这个吗？

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>

---

我的例子 - 蓝框与图像不重叠。相反，它取代了图像。

---

我想这样：折扣盒与图像/ CSS类重叠

Answer 1

您可以在顶部div上使用z-index和绝对定位。类似的东西：

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

您也可以在顶部和右侧使用百分比代替px，以使其更灵活。

修改：您还必须将position: relative添加到div.item（根据应用了位置的最近的包含元素应用绝对位置）。

z-index不是严格必要的，只要你想要的东西出现在代码底部的东西之前。我有时喜欢把它放在那里以防万一以后搬东西。

Answer 2

尝试在项目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;
}

Answer 3

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

Answer 4

您可以使用绝对定位将蓝色框置于顶部，只需确保将父元素设置为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;
}

Answer 5

这是我编写的快速内容，应该适合您：JsFiddle Demo