Question

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

现在我还要在父div的右上角显示div。

我尝试使用此CSS代码来实现目标：

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

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

我的示例页面可以找到here，我要对齐的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”属性指定

更多关于职位here。

Answer 4

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

示例：

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

Answer 5

制作一个父div，在css中使它浮动：对然后固定孩子的位置这将使div在所有时间和右侧保持其位置

Answer 6

您可以简单地执行以下操作：

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

Answer 7

我用它在页面的右下角放置一个 div（里面有它的东西），并留有一些边距：

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

Answer 8

只需执行此操作。不会影响水平位置。

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

Answer 9

这是真正的解决方案（还有其他很酷的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;
}

注意 top：0 和 right：0 。这就是为我做的事情。

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

9 个答案: