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 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 1

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 2

Use the 'right' attribute alongside fixed position styling. The value provided acts as an offset from the right of the window boundary.

Code example:

.test {
  position: fixed;
  right: 0;
}

If you need some padding you can set right property with a certain value, for example: right: 10px .

Note: float property doesn't work for position fixed and absolute

Answer 3

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 4

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 5

创建一个父 div，在 css 中使其浮动：右然后使子 div 的位置固定，这将使 div 始终保持在其位置并在右侧

Answer 6

I use this to put a div (with its stuff inside) at the bottom-right of the page with some margin:

.my-div-container{
    position: fixed;
    bottom: 1rem;
    left: 90%;
}

Answer 7

The best solution I found is to give the element a left margin . The elements below it in left margin will be ckickable

 #my_id{ margin-left: 75%; position:fixed; right: 0; }

 <div id="my_id" > My Text </div> <a href="http://www.stackoverflow.com">Stack Overflow</a>

Answer 8

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.

Answer 9

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 10

Just do this. It doesn't affect the horizontal position.

.test {
 position: fixed;
 left: 0;
 right: 0;
 }