[英]CSS: fixed positioning, right: 0px but won't obey max-width
我无法定位,最大宽度和'右:0px'协调工作! 我正在创建一个固定在我的网站右上角的div。 页面内容的最大宽度为1000px,但标签只遵循我的'right:0px'规则并向右粘,一旦达到最大宽度就不遵守。 还应该注意的是,默认情况下,div位于左上角并遵循最大宽度(如果我键入'left:0px;'但是,它不遵守规则并且它会粘在左边)。
CSS:
#content {
margin: 0 auto;
max-width: 1000px; }
#div {
width: 150px;
position: fixed;
right: 0px; }
以下是我已经尝试过的一些替代方案:
非常感谢帮助! 谢谢。
如果我理解正确, 这就是你所追求的 。
您需要添加一个具有绝对位置的容器以将内容移到右侧,然后使用固定位置容器将其保持在您需要的最右侧。
如果您不想添加其他绝对容器,请另行选择
#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;
}
我在jsfiddle中没有遇到任何问题。 您可能想要查看影响该区域的CSS。 如果#content不是块级元素,则可能会出现问题(不会应用宽度等等。来自您的更多代码将非常有用,因此我们确切地知道发生了什么并且可以帮助您更多。
我想你需要这个:
#content {
margin: 0 auto;
max-width: 1000px;
height:20px;
background:yellow;
position: relative;
}
#div {
width: 150px;
position: absolute;
right: 0px;
}
position:fixed与任何容器无关。 它相对于DOM的html元素。 无论你对#content做什么,这都是你在极右翼看到它的原因。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.