这是我用HTML/CSS创建的产品设计的最佳编码方式

我在为我的朋友做一个项目，他在利用大卡特尔。我想让t恤显示，然后在t恤的右上角画一个圆圈，显示价格以及产品是否在销售。我使用了下面的HTML/CSS来获得我目前所拥有的，但正如你所看到的，它并不是我想要的那样，当我试图在产品价格中添加填充或边距时，它不会移动…有什么建议吗

注意-19.99美元是编码价格…14.99美元的价格，上面说出售的只是一张图片，我把它放在下面作为参考，所以我把它放在Photoshop中设计的确切位置

正在使用的CSS：

    #products {
float: left;
margin-top:35px;
}


#product-1, #product-2, #product-3, #product-4, #product-5, #product-6, #product-7, #product-8, #product-9, #product-10,
#product-11, #product-12, #product-13, #product-14, #product-15, #product-16, #product-17, #product-18, #product-19, #product-20,
#product-21, #product-22, #product-23, #product-24, #product-25, #product-26, #product-27, #product-28, #product-29, #product-30,
#product-31, #product-32, #product-33, #product-34 #product-35, #product-36, #product-37, #product-38, #product-39, #product-40, #product-41, #product-42, #product-43, #product-44, #product-45, #product-46, #product-47, #product-48, #product-49, #product-50, #product-51, #product-52, #product-55, #product-56, #product-57, #product-58, #product-59, #product-60, #product-61, #product-62, #product-63, #product-64, #product-65, #product-66, #product-67 #product-68, #product-69, #product-70, #product-71, #product-72, #product-73, #product-74, #product-75, #product-76, #product-77, #product-78, #product-79, #product-80, #product-81, #product-82, #product-83, #product-84, #product-85, #product-86, #product-87, #product-88, #product-89, #product-90, #product-91, #product-92, #product-93, #product-94, #product-95, #product-96, #product-97,
#product-98, #product-99, #product-100 {
float:left;
}
#products .product-img {width:225px; margin-left:5px; margin-right:5px;}
#products .product-title {font-size:16px;}
#products .product-price {color:#fff; font-family:Arial; font-size:13px;}
#products .pink-circle {background-image: url(http://soireeclothing.com/images/price-bg.png); height:54px; width:54px; margin-top:-250px; margin-left:170px;}

结果我得到：

我想要的结果是：

---

请发布您的html代码

我建议将您的产品更改为一个类，以使您的CSS更干净

您的问题的一个可能解决方案是在sale类中使用CSS属性

z-index

。这可能会隐藏/显示另一个元素背后的销售价格

要在产品中实现这一点，您可以手动将sale price元素放入每个待售商品的HTML标记中，或者通过Javascript添加它

---

使用JQuery更容易<代码>$（“#元素”）.addClass（'Class'）

看起来您想要隐藏的价格是文本。然而，如果没有HTML，没有人能给你一个确切的答案。但是，添加

位置：相对；z指数：100

到

#产品。粉色圆圈

可能会有帮助。我发布HTML时遇到问题的唯一原因是我之前没有不断删减内容，但在这里我只是抓拍了一下，你可以在这里看到它：尽管如此……忽略14.99美元的价格和显示在销售中的部分它只是作为参考，知道我将把19.99美元放在哪里，然后CSS生成了粉红色的圆圈。@bfrohs将其定位在相对位置，成功了！谢谢，现在我面临着无法在#产品上设置利润率顶部或填充顶部。产品价格部门…这会是什么结果？一切都在控制之下，伙计们…虽然答案并不具体，但他们让我知道了我需要去的地方。谢谢大家的投入！