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

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.

我想显示一个div，即使用户滚动页面也始终可见。我使用了CSS位置：fixed;为了那个原因。

Now I also want to show the div at the right hand corner of the parent div.

现在我还想在父div的右角显示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 div element I want to align is called test under the parent class parent.

我的示例页面可以在这里找到，我要对齐的div元素在父类parent下称为test。

Is there any CSS or JavaScript solution to aligning the fixed position element on the right side of the screen?

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

6 个解决方案

#1

With position fixed, you need to provide values to set where the div will be placed, since it's a fixed position.

在位置固定的情况下，您需要提供值来设置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”属性指定

#2

You can use two imbricated div. But you need a fixed width for your content, that's the only limitation.

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

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

#3

float property doesn't work for position fixed and absolute, try this code instead:

float属性不适用于固定位置和绝对位置，请尝试使用以下代码：

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

If you need some padding you can set right property with a certain value, for example: right: 10px.

如果需要一些填充，可以使用特定值设置正确的属性，例如：右：10px。

#4

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.

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

Example:

例：

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

#5

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始终保持在其位置和右侧

#6

-1

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:0 and right:0. That's what did it for me.

注意顶部：0和右：0。这就是为我做的事情。

#1