将图像放置到右上角 - CSS [英] Placing an image to the top right corner - CSS

问题描述

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

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或定义其类的图像：

I tried different things as including the image in another div or defining its class like:

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

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

但没有运气。

任何想法？

推荐答案

您可以这样做：

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

这篇关于将图像放置到右上角 - CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！