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

如果我理解正確， 這就是你所追求的 。

您需要添加一個具有絕對位置的容器以將內容移到右側，然后使用固定位置容器將其保持在您需要的最右側。

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做什么，這都是你在極右翼看到它的原因。