CSS 帮助在图像上定位销售横幅答案

【问题标题】：CSS Help To Position Sale Banner Over ImageCSS 帮助在图像上定位销售横幅
【发布时间】：2012-04-10 05:46:32
【问题描述】：

我正在尝试将此促销横幅放置在图片上。红色边框是一个固定宽度的 div，它与页面布局所需的宽度一样宽。不管图片大小，我都需要留出这么宽的空间。

黑色边框是一个只和图片一样宽的div，我试图在图片顶部的右上角显示促销横幅。

示例：http://jsfiddle.net/d5nxT/

我知道我的显示器和位置有点乱。我只需要图像和销售范围具有相同的设置，除了销售范围向右浮动并且具有比图像更高的 z-index。

【问题讨论】：

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

标签： html css z-index css-float alignment

【解决方案1】：

查看小提琴和演示：

小提琴：http://jsfiddle.net/d5nxT/2/

演示：http://jsfiddle.net/d5nxT/2/embedded/result/

float:right, z-index, position:relative, display:inline-block 都不是必需的。

【讨论】：

【解决方案2】：

您需要像这样fiddlesale 跨度position:absolute

【讨论】：

【解决方案3】：

您应该将销售范围的 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 样式）

【讨论】：

【解决方案4】：

有 2 件事情需要做才能完美地完成这种展示位置。

您需要一个定位（非固定）元素作为父元素。
您的孩子需要变得绝对。

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

对你来说，这可能意味着div.interior-images 需要获取属性position: relative。而span.onsale 获取属性position: absolute 和right: 0。

你的altered jsfiddle can be found here

【讨论】：