Html 将图像放置在右上角 - CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7282236/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Placing an image to the top right corner - CSS
提问by Randomize
I need to display an image on the top-right corner of a div (the image is a "diagonal" ribbon) but keeping the current text contained in an internal div, sticked at the top of it like at the moment.
我需要在 div 的右上角显示一个图像（该图像是一个“对角线”功能区），但将当前文本包含在一个内部 div 中，像现在一样粘在它的顶部。
I tried different things as including the image in another div or defining its class like:
我尝试了不同的方法，例如将图像包含在另一个 div 中或定义其类，例如：
.ribbon {
position: relative;
top: -16px;
right: -706px;
}
<div id="content">
<img src="images/ribbon.png" class="ribbon"/>
<div>some text...</div>
</div>
but without any luck. The best result I got was all the text scrolled down for the same height size of the image.
但没有任何运气。我得到的最好结果是所有文本都向下滚动以获取相同高度大小的图像。
Any idea?
任何的想法？
回答by Rok Kralj
You can just do it like this:
你可以这样做：
#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>
回答by Gary Chambers
Position the divrelatively, and position the ribbon absolutely inside it. Something like:
div相对定位，并将色带绝对定位在其中。就像是：
#content {
position:relative;
}
.ribbon {
position:absolute;
top:0;
right:0;
}
回答by Alexx Roche
While looking at the same problem, I found an example
在看同样的问题时，我找到了一个例子
<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>
The trick here is to create a small, (I used GIMP) a PNG (or GIF) that has a transparent background, (and then just delete the opposite bottom corner.)
这里的技巧是创建一个小的（我使用 GIMP）一个具有透明背景的 PNG（或 GIF），（然后只需删除相反的底角。）
