html - CSS 有助于在图像上定位销售横幅

标签 html css z-index css-float alignment

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

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

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

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

最佳答案

查看 fiddle 和演示:

fiddle :http://jsfiddle.net/d5nxT/2/

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

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

关于html - CSS 有助于在图像上定位销售横幅,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9876938/

相关文章:

html - 根元素不会将其显示更改为内联

css - 在 bootstrap 中对齐覆盖的 div

internet-explorer - CSS3 Internet Explorer 缩放背景过滤器 :

c# - 如何设置 Canvas.ZIndex 在控件之间绘制黑色面板?

Jquery z-index,触发按钮上的奇怪行为

html - 如何在我的页面上拉伸(stretch)谷歌地图以在 Bootstrap 中水平放置容器?

javascript - Bootstrap Carousel 在 Chrome 中不工作

javascript - 如何在 JavaScript 中使用文字引号?

javascript - 滚动不使用溢出的div

css - 带有 CSS 转换的 Safari 渲染错误 - 深度排序/z-index 问题? (适用于 Chrome)