How to place an image in the top right corner with CSS?

Spread the love

Sometimes, we want to place an image in the top right corner with CSS.

In this article, we’ll look at how to place an image in the top right corner with CSS.

How to place an image in the top right corner with CSS?

To place an image in the top right corner with CSS, we use absolute and relative position.

For instance, we write

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

to add some elements.

Then we write

#content {
  position: relative;
}

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

to make the outer div have relative position with position: relative;.

Then we make the img element have absolute position with position: absolute;.

And we set the top and right positions relative to the outer div.

Conclusion

To place an image in the top right corner with CSS, we use absolute and relative position.

Leave a Reply

Your email address will not be published. Required fields are marked *