Align div with fixed position on the right side

Question

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

Answer 1

make a parent div, in css make it float:right then make the child div's position fixed this will make the div stay in its position at all times and on the right

Answer 2

Trying to do the same thing. If you want it to be aligned on the right side then set the value of right to 0. In case you need some padding from the right, set the value to the size of the padding you need.

Example:

.test {
  position: fixed;
  right: 20px; /* Padding from the right side */
}

Answer 3

You can use two imbricated div. But you need a fixed width for your content, that's the only limitation.

<div style='float:right; width: 180px;'>
 <div style='position: fixed'>
   <!-- Your content -->
 </div>
</div>

Answer 4

You can simply do this:

.test {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  right: 0;
}

Answer 5

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.

Answer 6

Here's the real solution (with other cool CSS3 stuff):

#fixed-square {
position: fixed;
top: 0;
right: 0;
z-index: 9500;
cursor: pointer;
width: 24px;
padding: 18px 18px 14px;
opacity: 0.618;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: all 0.145s ease-out;
-moz-transition: all 0.145s ease-out;
-ms-transition: all 0.145s ease-out;
transition: all 0.145s ease-out;
}

Note the top:0 and right:0. That's what did it for me.