Javascript 将 div 与右侧的固定位置对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2829665/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align div with fixed position on the right side
提问by Pradyut Bhattacharya
I want to show a divwhich is always visible even as the user scrolls the page. I have used the CSS position: fixed;for that.
我想显示div即使用户滚动页面也始终可见的a 。我position: fixed;为此使用了 CSS 。
Now I also want to show the divat the right hand corner of the parent div.
现在我还想div在 parent 的右上角显示div。
I tried to use this CSS code to achieve the goal:
我尝试使用此 CSS 代码来实现目标：
.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 divelement I want to align is called testunder the parent class parent.
我的示例页面可以在这里找到，div我要对齐的元素test在父类下调用parent。
Is there any CSS or JavaScript solution to aligning the fixed position element on the right side of the screen?
是否有任何 CSS 或 JavaScript 解决方案来对齐屏幕右侧的固定位置元素？
采纳答案by Gabe
With position fixed, you need to provide values to set where the div will be placed, since it's a fixedposition.
位置固定后，您需要提供值来设置 div 的放置位置，因为它是一个固定位置。
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
固定- 生成相对于浏览器窗口定位的绝对定位元素。元素的位置由“left”、“top”、“right”和“bottom”属性指定
More on position here.
更多关于位置在这里。
回答by 246tNt
You can use two imbricated div. But you need a fixed width for your content, that's the only limitation.
您可以使用两个叠瓦状的 div。但是您的内容需要固定宽度，这是唯一的限制。
<div style='float:right; width: 180px;'>
<div style='position: fixed'>
<!-- Your content -->
</div>
</div>
回答by Santosh
Use the 'right' attribute alongside fixed position styling. The value provided acts as an offset from the right of the window boundary.
在固定位置样式旁边使用 'right' 属性。提供的值用作距窗口边界右侧的偏移量。
Code example:
代码示例：
.test {
position: fixed;
right: 0;
}
If you need some padding you can set rightproperty with a certain value, for example: right: 10px.
如果你需要一些填充您可以设置right属性具有一定的值，例如：right: 10px。
Note: floatproperty doesn't work for position fixedand absolute
注意：float属性不适用于位置fixed和absolute
回答by Chris
Trying to do the same thing. If you want it to be aligned on the right side then set the value of rightto 0. In case you need some padding from the right, set the value to the size of the padding you need.
试图做同样的事情。如果您希望它在右侧对齐，则将值设置right为0。如果您需要右侧的一些填充，请将值设置为您需要的填充大小。
Example:
例子：
.test {
position: fixed;
right: 20px; /* Padding from the right side */
}
回答by Pizzarius
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
创建一个父 div，在 css 中使其浮动：右然后使子 div 的位置固定，这将使 div 始终保持在其位置并在右侧
回答by MMH
You can simply do this:
你可以简单地这样做：
.test {
position: -webkit-sticky; /* Safari */
position: sticky;
right: 0;
}
回答by user1429980
Here's the real solution (with other cool CSS3 stuff):
这是真正的解决方案（还有其他很酷的 CSS3 东西）：
#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:0and right:0. That's what did it for me.
注意top:0和right:0。这就是为我所做的。
