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?
This question is related to
javascript
css
You can simply do this:
.test {
position: -webkit-sticky; /* Safari */
position: sticky;
right: 0;
}
Just do this. It doesn't affect the horizontal position.
.test {
position: fixed;
left: 0;
right: 0;
}
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.
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
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
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>
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 */
}
Source: Stackoverflow.com