Fixed div element position in the top right corner using CSS?

In this CSS tutorial, we are going to see how to keep a div element in the top right position so that it will not change the position and always be in that position even after scrolling down the web page.

Let’s start writing coding to keep our element to top right position always.

Before we go forward, first let’s write our HTML code that is given below:

<div id="topRightFixed">Top right fixed content</div>
<div style="height: 3000px">
  <h2>Scroll down now</h2>

We have given the div element id “topRightFixed” which will be always be fixed in top right position. Also, we can see that we have taken a div element with the height 300 px so that the browser has sufficient height to scroll.

CSS Spinner Or Loader Using Font Awesome Icon

How To Draw A Circle In CSS? – CSS Code To Draw A Circle

Now how to make the position of our element fixed?

CSS has position property which can keep our div element position fixed to a specific position where we want by providing the left, right and top property.

Now below is the CSS code for our element which will keep our div element always to the top right corner:

#topRightFixed {
   position: fixed;
   top: 0;
   right: 0;
   background: #336600;
   padding: 6px;
   color: #fff;
   font-size: 1.4em;

We have added the background color, text color and padding to give it a better look. We have set the top property and right property to 0 so that both from the top and right, the distance be 0. Thus we will see our element to the top right corner.

CSS Code To Make An Element Transparent

That’s it. Now we can test our code.

If we run our code, then we will see our element to the top right corner. Now if we scroll down with our mouse then we can see that our page is scrolling down, but the element with id “topRightFixed ” is always to the top right corner.

So we have successfully done our task.

Leave a Reply

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