Question

我需要在div的右上角显示一个图像（图像是一个“对角线”功能区），但保持当前文本包含在内部div中，就像此刻一样粘在它的顶部。

我尝试了不同的东西，包括在另一个div中的图像或定义它的类，如：

.ribbon {
   position: relative;
   top: -16px;
   right: -706px;
}

<div id="content">
   <img src="images/ribbon.png" class="ribbon"/>
   <div>some text...</div>
</div>

但没有任何运气。我得到的最好结果是所有文本都向下滚动了相同的图像高度。

有什么想法吗？

Answer 1

你可以这样做：

#content {
    position: relative;
}
#content img {
    position: absolute;
    top: 0px;
    right: 0px;
}

<div id="content">
    <img src="images/ribbon.png" class="ribbon"/>
    <div>some text...</div>
</div>

Answer 2

相对定位div，并将色带绝对放在其中。类似的东西：

#content {
  position:relative;
}

.ribbon {
  position:absolute;
  top:0;
  right:0;
}

Answer 3

在查看同样的问题时，我找到了一个例子

<style type="text/css">
#topright {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    height: 125px;
    width: 125px;
    background: url(TRbanner.gif) no-repeat;
    text-indent: -999em;
    text-decoration: none;
}
</style>

<a id="topright" href="#" title="TopRight">Top Right Link Text</a>

这里的诀窍是创建一个小的（我使用的GIMP）一个具有透明背景的PNG（或GIF）（然后只删除相反的底角。）

将图像放在右上角 - CSS

3 个答案: