将图像放置在右上角 - CSS

我需要在div的右上角显示图像（图像是“对角线”功能区），但保留当前文本包含在内部div中，在它的顶部就像现在一样。将图像放置在右上角 - CSS

我尝试不同的东西，包括在另一个DIV图像或定义喜欢它的类：

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

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

，但没有任何运气。我得到的最好结果是所有文字向下滚动以获得图像的相同高度尺寸。

有什么想法？

来源

2011-09-02 Randomize

推荐阅读：* [ALA：CSS Positioning 101]（http://www.alistapart.com/articles/css-positioning-101/）*和* [ALA：CSS Floats 101]（http://www.alistapart.com/articles/css-floats-101/）*。 – jensgram

@jensgram两个链接都很棒:) – hqt

159

你可以做这样的：

#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>

来源

2011-09-02 10:36:38

位置div比较，和色带绝对定位里面。喜欢的东西：

#content { 
    position:relative; 
} 

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

来源

2011-09-02 10:38:12

stackoverflow来拯救！谢谢！ –

这是美丽。谢谢你加里。 – suresh

注视同样的问题，我发现了一个例子

<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），有一个透明的背景，（然后只删除相反的底角）。

来源

2013-01-05 21:20:44

将图像放置在右上角 - CSS

回答

相关问题