将图像放置在右上角 - CSS答案

【问题标题】：Placing an image to the top right corner - CSS将图像放置在右上角 - CSS
【发布时间】：2011-11-09 01:56:51
【问题描述】：

我需要在 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>

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

有什么想法吗？

【问题讨论】：

推荐阅读：ALA: CSS Positioning 101和ALA: CSS Floats 101。

标签： html css

【解决方案1】：

你可以这样做：

<style>
    #content {
        position: relative;
    }
    #content img {
        position: absolute;
        top: 0px;
        right: 0px;
    }
</style>

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

【讨论】：

是的，但我没有看到您的 class="ribbon" 有任何用途，并且您的 css 样式中没有定义功能区类

【解决方案2】：

相对定位div，并将色带绝对定位在其中。比如：

#content {
  position:relative;
}

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

【讨论】：

【解决方案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），（然后删除对面的底角。）

【讨论】：

【解决方案4】：

尝试使用float: right; 和一个新的 div 作为顶部，这样图像将保持在页面顶部或使用导航栏的 div（如果你有的话）。

下面的例子：

#left{
  float: left;
}
#right{
  float: right;
}

<div>
  <button type="button" id="left" onclick="alert('left button')">Left</button>     
  <div><!-- A new div for the top -->
    <img src="images/ribbon.png" class="ribbon" id="right">
    </img>
  </div>
</div>
  <p>some text...
  the image is on the top right corner</p>
 <p>some more text...</p>

【讨论】：