Align div with fixed position on the right side

I want to show a div which is always visible even as the user scrolls the page. I have used the CSS position: fixed; for that.

Now I also want to show the div at the right hand corner of the parent div.

I tried to use this CSS code to achieve the goal:

.test {
  position: fixed;
  text-align: right;
}

But it doesn’t align the element on the right side.

My example page can be found here, the div element I want to align is called test under the parent class parent.

Is there any CSS or JavaScript solution to aligning the fixed position element on the right side of the screen?

Answer

With position fixed, you need to provide values to set where the div will be placed, since it’s a fixed position.

Something like….

.test
{
   position:fixed;
   left:100px;
   top:150px;
}

Fixed – Generates an absolutely positioned element, positioned relative to the browser window. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties

More on position here.