Html CSS有助于将销售横幅置于图像之上

我试图将此销售横幅置于图像上方。红色边框是一个固定宽度的div，其宽度与页面布局所需的宽度相同。无论图像大小如何，我都需要保持一个像这样宽的空间

黑色边框是一个仅与图片一样宽的div，我正试图在图片顶部的右上角显示销售横幅

例如：

---

我知道我把显示器和位置弄得一团糟。我只需要图像和销售范围具有相同的设置，除了销售范围向右浮动并且z指数比图像高。

您需要定位：绝对销售范围的css如下所示

您应该将销售范围的css更改为：

span.onsale {
    display: inline-block;
    width: 59px;
    height: 59px;
    z-index: 10;
    background: url(http://i42.tinypic.com/sq49ow.png) no-repeat;
    position:absolute;
    top:0;
    right:0;
}

---

通过这种方式，销售图像被放置在父图像的右上角（因此是top:0和right:0样式）

要完美地进行此类放置，需要做两件事

您需要一个定位（非固定）元素作为父元素

你的孩子需要变得绝对

如果您确保这两件事，您将能够在css中使用top、left、bottom和right属性相对于父元素定位子元素

对您来说，这可能意味着

div.interior-images

需要获取属性

position:relative

。和

span.onsale

获取属性

position:absolute

和

right:0

---

您的

请参见小提琴和演示：

小提琴：

演示：

---

浮动：右，z-索引，位置：相对，显示：内联块都不是必需的。

亲爱的，请查看我的答案，如果您遇到任何问题，请告诉我，以便我可以根据您的需要更改代码。