Html – Placing an image to the top right corner – CSS

csshtml

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?

Best Answer

You can just do it like this:

<style>
    #content {
        position: relative;
    }
    #content img {
        position: absolute;
        top: 0px;
        right: 0px;
    }
</style>

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