157

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?

Matthias Braun
  • 32,039
  • 22
  • 142
  • 171
Randomize
  • 8,651
  • 18
  • 78
  • 133
  • 7
    Recommended reading: *[ALA: CSS Positioning 101](http://www.alistapart.com/articles/css-positioning-101/)* and *[ALA: CSS Floats 101](http://www.alistapart.com/articles/css-floats-101/)*. – jensgram Sep 02 '11 at 10:45

5 Answers5

305

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" alt="" />
    <div>some text...</div>
</div>
Andy
  • 4,783
  • 2
  • 26
  • 51
Rok Kralj
  • 46,826
  • 10
  • 71
  • 80
  • 1
    Yes but i am not seeing any use of your class="ribbon" and there is no ribbon class defined in your css style – webs Oct 06 '21 at 20:53
35

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

#content {
  position:relative;
}

.ribbon {
  position:absolute;
  top:0;
  right:0;
}
Gary Chambers
  • 24,930
  • 4
  • 35
  • 31
4

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.)

raiz media
  • 67
  • 5
Alexx Roche
  • 3,151
  • 1
  • 33
  • 39
0

Try using float: right; and a new div for the top so that the image will stay on top.

Example below: 

#left{
  float: left;
}
#right{
  float: right;
}
<div>
  <button type="button" id="left" onclick="alert('left button')">Left</button>     
    <img src="images/ribbon.png" class="ribbon" id="right">
    </img>
</div>
  <p>some text...
  the image is on the top right corner</p>
 <p>some more text...</p>
otherlog
  • 1
  • 1
0
<style>
    img {
        border: 2px solid black;
    }
    #content {
        position: relative;
    }
    #content img {
        position: absolute;
        top: -2px;
        right: 8px;
    }
    </style>

<div id="content">
    <img src="Example.png" class="ribbon" alt="" />
</div>
Programer
  • 1
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 30 '23 at 03:07