Размещение изображения в верхнем правом углу - CSS

Мне нужно отобразить изображение в правом верхнем углу 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>

но без везения. Лучший результат, который я получил, - это весь текст, прокручиваемый для того же размера высоты изображения.

Любая идея?

Ответы

Ответ 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>

Ответ 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), который имеет прозрачный фон (а затем просто удаляет противоположный нижний угол.)