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.
