对齐DIV与右侧的固定位置

Question

我想说明一个div它总是可见即使用户滚动页面。我已经使用了CSS position: fixed;了点。

现在我也想展示在父div的右上角的div。

我试图用这个CSS代码要实现的目标：

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

不过，这并不排列在右侧的元素。

我的例子页面可以发现here的div元素我要对齐的父类test下被称为parent。

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

Answer 1

带位置固定，您需要提供值来设置使格将被放置，因为它是一个固定的位置。

就像是....

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

fixed - 产生绝对定位的元素，相对于浏览器窗口的位置。元素的位置与“左”，“顶”，“右”和“底”属性中指定

更多关于位置here。

Answer 2

您可以使用两个鳞片状股利。但你需要一个固定的宽度为您的内容，这是唯一的限制。

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

Answer 3

一起使用固定位置的造型“正确”的属性。所提供的值充当从窗口边界的右偏移。

代码示例：

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

如果你需要一些填充您可以设置right财产具有一定的值，例如：right: 10px。

注：float属性不位置fixed和absolute工作

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

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

注意顶部：0，右：0。这就是为我做。