CSS：固定定位，右：0px但不服从最大宽度

Question

我无法定位，最大宽度和'右：0px'协调工作！我正在创建一个固定在我的网站右上角的div。页面内容的最大宽度为1000px，但标签只遵循我的'right：0px'规则并向右粘，一旦达到最大宽度就不遵守。还应该注意的是，默认情况下，div位于左上角并遵循最大宽度（如果我键入'left：0px;'但是，它不遵守规则并且它会粘在左边）。

CSS：

#content {
margin: 0 auto;
max-width: 1000px; }

#div {
width: 150px;
position: fixed;
right: 0px; } 

以下是我已经尝试过的一些替代方案：

• 宽度：100％（文字对齐：右）<---不太正确，我不喜欢100％宽度而不是150px
• 添加代码以在html（而不是CSS）中“手动”定位div
• 我发现浮动和文本对齐不会影响固定定位

非常感谢帮助！谢谢。

Answer 1

如果我理解正确，this is what you're after。

您需要添加一个具有绝对位置的容器以将内容移到右侧，然后使用固定位置容器将其保持在您需要的最右侧。

Answer 2

如果您不想添加其他绝对容器，请另行选择

#div {
  width: 150px;
  position: fixed;
  right: calc(50% - 500px); /* will move the div as far as 50% of viewport
  then move it back to 500px (that is half of max-width) */
}

/* if needed, you can add media query */
@media (max-width: 1000px) {
  right: 0;
}

Answer 3

我让它在jsfiddle没问题。您可能想要查看影响该区域的CSS。如果#content不是块级元素，则可能会出现问题（不会应用宽度等等。来自您的更多代码将非常有用，因此我们确切地知道发生了什么并且可以帮助您更多。

Answer 4

我想你需要这个：

#content {
  margin: 0 auto;
  max-width: 1000px; 
  height:20px;
  background:yellow;
  position: relative;
}
#div {
  width: 150px;
  position: absolute;
  right: 0px;
}

Answer 5

position：fixed与任何容器无关。它相对于DOM的html元素。无论你对#content做什么，这都是你在极右翼看到它的原因。