Placing an image to the top right corner - CSS

133

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, like stuck to the top of it.

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>

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?

This question is tagged with html css

~ Asked on 2011-09-02 10:35:05

The Best Answer is


252

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>

~ Answered on 2011-09-02 10:36:38


30

Position the div relatively, and position the ribbon absolutely inside it. Something like:

#content {
  position:relative;
}

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

~ Answered on 2011-09-02 10:38:12


Most Viewed Questions: