将div与右侧的固定位置对齐

Question

div即使用户滚动页面,我也希望显示哪个始终可见.我已经使用了CSS position: fixed;.

现在我也想div在父母的右角显示div.

我试图使用这个CSS代码来实现目标:

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

但它没有对齐右侧的元素.

我的示例页面可以在这里找到,div我想要对齐的元素test在父类下调用parent.

是否有任何CSS或JavaScript解决方案来对齐屏幕右侧的固定位置元素？

Answer 1

你可以使用两个imbricated div.但是你需要一个固定宽度的内容,这是唯一的限制.

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

Answer 2

使用'right'属性和固定位置样式.提供的值用作窗口边界右侧的偏移量.

代码示例:

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

如果需要一些填充,可以设置right具有特定值的属性,例如:right: 10px.

注意:float属性不适用于位置fixed和absolute

Answer 3

在位置固定的情况下,您需要提供值来设置div的放置位置,因为它是固定位置.

就像是....

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

固定 - 生成一个绝对定位的元素,相对于浏览器窗口定位.元素的位置使用"left","top","right"和"bottom"属性指定

更多关于这里的位置.

Answer 4

试着做同样的事情.如果您希望它在右侧对齐,则将值设置right为0.如果您需要从右侧填充,请将值设置为您需要的填充大小.

例:

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