CSS:绝对定位图像 - 但它不在顶部

标签 css css-position ribbon

我正在尝试在我的网站之一上放置丝带图像。不幸的是,我无法弄清楚为什么它不能像我想要的那样工作。我使用 position: relative;position: absolute; 来完成所有定位工作,但问题是图像不在顶部:

Ribbon

我已经习惯了以下代码:

.ribbon { position: relative; }
.ribbon h3 {
    background: url("images/ribbon.png") no-repeat scroll 0 0 transparent;
    color: #FFFFFF;
    font-family: Tahoma,arial,serif;
    font-size: 1.4em;
    height: 34px;
    padding: 7px 0 0 17px;
    position: absolute;
    right: -36px;
    width: 244px;
    z-index: 200;
}

如果你想看看这个网站,你可以这样做on this link (用户:tmp/密码:tmpuser)。

它应该是这样的:

Ribbon

最佳答案

看起来外部 DIV 宽度太小,无法容纳所有内容,并且将图像向下推。

尝试将主/包装 DIV 的宽度设置为更大的宽度,看看是否可行。

关于CSS:绝对定位图像 - 但它不在顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5587020/

相关文章:

c# - WPF 窗口边框与功能区控件表现得很奇怪

html - 三 Angular 形周围的CSS框阴影

css - 如何用虚线制作元素符号列表(菜单)

css - webkit 翻转动画位置并不总是在中间

c# - 功能区更改标题文本颜色

Designer中的WPF功能区选项卡 View

javascript - 窗口滚动效果上 JQuery 淡入的目标元素问题

html - 响应式选择下拉选项在桌面 Chrome 浏览器移动 View 中显示为黑色矩形框

html - CSS 相对容器不随 margin-child-elements 缩放

css - div 的定位根据视口(viewport)变化