将带有固定位置的div对齐到右侧

Question

我想展示一个div，无论用户滚动页面，它都应该始终可见。我使用了CSS的position: fixed;来实现这个目的。

现在，我还想将这个

显示在父

的右上角。

我尝试使用以下CSS代码来实现这个目标：

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

但它不能将元素对齐到右侧。

我的示例页面可以在这里找到，我想要对齐的

元素称为test，位于父类parent下。

是否有CSS或JavaScript解决方案可以将固定位置的元素对齐到屏幕右侧？

- Pradyut Bhattacharya

---

在你的类中尝试使用 float: right。 - Pranay Rana

所以你想要单词“另一个测试”出现在灰色框的右上角，并且在用户滚动时保持灰色框的位置不变？ - Richard JP Le Guen

不要将带有文本“Another Test”的<div>元素与其父级<div id="parent">右对齐，并使<div>元素在用户滚动时保持原位... - Pradyut Bhattacharya

Answer 1

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

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

- 246tNt

---

很高兴我找到了这个答案...没想到有一个CSS解决方案。看起来我只需要将"fixed"元素放在另一个div里就可以了。 - Chris

非常好的回答！针对"imbricated"这个词，我给你加一分。 - Ortal

Answer 2

在固定定位样式旁使用“right”属性。所提供的值作为窗口边界右侧的偏移量。

代码示例：

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

如果你需要一些填充，你可以设置right属性为某个值，例如：right: 10px。

注意：对于固定和绝对定位，float属性不起作用。

- Santosh

Answer 3

使用fixed定位，需要提供数值来指定div的位置， 因为它是一个固定位置。

类似于....

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

Fixed - 生成一个绝对定位的元素，相对于浏览器窗口进行定位。该元素的位置由 "left"、"top"、"right" 和 "bottom" 属性指定。

更多关于定位的内容可以在这里查看。

- Gabe

---

生成一个绝对定位的元素 - 或许需要重新表述，因为“绝对定位”是另一个不同的概念？ - Richard JP Le Guen

也许您应该与w3c的作者讨论这个问题。 - Gabe

我找到了一个解决方案，只需使用left:400px;，无需使用top和bottom...但我必须说...对于复杂的问题来说并不是完整的解决方案。无论是w3c还是浏览器开发人员都应该为使用CSS的UI设置高标准。 - Pradyut Bhattacharya

问题与“使用position fixed时正确位置”的相关，因此在此处使用left：并非解决方案。 - ensonic

这个问题已经在近两年前得到解决并被选为答案，因此你的观察已经没有意义了。 - Gabe

Answer 4

尝试做同样的事情。如果你想让它靠右对齐，那么将right的值设置为0即可。如果需要从右侧添加一些填充，则将值设置为所需填充的大小。

例如：

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

- Chris

---

确实没有必要使用嵌套的div（虽然那也可以）。 - ensonic

嗯...这并没有将div放置在父div的右上角，而是相对于html元素右对齐，即相对于页面的整个宽度右对齐。因此，需要采用嵌套的方法。有什么遗漏吗？ - K. Kilian Lindberg

Answer 5

这里是真正的解决方案（以及其他很酷的CSS3技巧）：

#fixed-square {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9500;
    transform: rotate(-90deg);
}

注意 top:0 和 right:0。这就是让我成功的关键。

- user1429980

---

我不知道为什么他们会投票反对你，但是你的解决方案解决了我的问题。 - Asme Just

@AsmeJust 很可能是因为他的代码有很多不必要的开销。这个解决方案本来只需要三到五行，但他加了很多额外、不必要的东西。 - FullyHumanProgrammer

Answer 6

创建一个父级 div，在 CSS 中将其设置为 float:right，然后将子级 div 的位置设置为 fixed，这将使 div 在任何时候都保持在其位置，并位于右侧。

- Pizzarius

Answer 7

我使用这个方法将一个带有内容的div放置在页面的右下角，并添加一些边距：

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

- Andrea Ciccotta

Answer 8

我找到的最好的解决方案是给元素添加左边距。在左边距下面的元素将可以被点击。

#my_id{
      margin-left: 75%;
      position:fixed;
      right: 0;
    }

<div id="my_id" >
    My Text
  </div>
  <a href="http://www.stackoverflow.com">Stack Overflow</a>

- python test

Answer 9

只需这样做，不会影响水平位置。

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

- John Adeniran