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

Question

我正在尝试在我的某个网站上放置功能区图像。不幸的是，我无法弄清楚为什么它不起作用，因为我想要它。我使用position: relative;和position: absolute;来完成所有定位工作，但问题是图片不在顶部：

我以前用过以下代码：

.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 / pass： tmpuser ）。

它应该是这样的：

非常感谢你的帮助！ 丹尼斯

Answer 1

看起来外部DIV宽度太小而不适合所有人并且它正在向下推动图像。

尝试将主/包装DIV的宽度设置为更大的宽度，看看是否有效。

Answer 2

这可能对您有所帮助，但它非常漂亮。

 .ribbon { 
   position: relative;
   height: 34px;
   width: 264px;
   padding: 7px 0 0 17px;
}

.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;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
}