CSS:固定定位,右:0px但不服从最大宽度

时间:2012-07-13 08:35:28

标签: html css-position css

我无法定位,最大宽度和'右: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
  • 我发现float和text-align不影响固定定位

非常感谢帮助!谢谢。

5 个答案:

答案 0 :(得分:9)

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

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

答案 1 :(得分:3)

如果您不想添加额外的绝对容器

,则替代
#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;
}

答案 2 :(得分:0)

我在jsfiddle中没有遇到任何问题。您可能想要查看影响该区域的CSS。如果#content不是块级元素,则可能会出现问题(不会应用宽度等等。更多代码会对您有所帮助,因此我们确切地知道发生了什么并且可以帮助您更多。

答案 3 :(得分:0)

我认为你需要这个:

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

答案 4 :(得分:0)

位置:固定与任何容器无关。它相对于DOM的html元素。无论你对#content做什么,这都是你极右翼看到它的原因。