Php 一个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;
}

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

HTML文件

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;
}

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

五折

---

我的示例--蓝色框没有与图像重叠。相反，它会置换图像。

---

我想要这样：折扣框与image/CSS类重叠

---

尝试将折扣标签绝对定位在item 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;
}

---

您可以在顶部分区上使用z索引和绝对定位。类似于：

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

您还可以在顶部和右侧使用百分比而不是px，使其更加灵活

编辑：您还必须将

位置：相对

添加到div.item（绝对位置基于应用位置的最近包含元素应用）

---

只要代码中顶部的内容出现在底部的内容之前，z索引就不是绝对必要的。有时我喜欢把它放在那里，以防以后东西移动。

您可以使用绝对定位将蓝色框放在顶部，只需确保父元素设置为

位置：相对

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;
}

这是我快速编出来的，应该对你有用：
第二张图片中的“折扣箱”在哪里？只有当
div.item
设置为
position:relative
时，这才有效。