Html CSS：固定定位，右：0px但不会服从最大宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11466911/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: fixed positioning, right: 0px but won't obey max-width
提问by Emily Ryder
I cannot get positioning, max-width, and 'right: 0px' to work together in harmony! I'm creating a div that is fixed on my site in the upper right corner. The content of the page has a max-width of 1000px, however the label only obeys my rule of 'right: 0px' and sticks to the right, disobeying once max-width has been reached. It should also be noted that by default, the div is in the upper left and obeys the max-width (if I type 'left: 0px;' though, it does not obey the rule and it sticks to the left).
我无法让定位、最大宽度和 'right: 0px' 和谐地协同工作！我正在创建一个固定在我网站右上角的 div。页面内容的最大宽度为 1000 像素，但是标签只遵守我的“右：0像素”规则并坚持向右，一旦达到最大宽度就违反。还应该注意的是，默认情况下，div 位于左上角并遵守最大宽度（如果我输入“left: 0px;”，但它不遵守规则并坚持在左边）。
CSS:
CSS：
#content {
margin: 0 auto;
max-width: 1000px; }
#div {
width: 150px;
position: fixed;
right: 0px; }
Here are some alternatives that I've already tried:
以下是我已经尝试过的一些替代方案：
- width: 100% (with text-align: right) <--- not quite right, and I don't like the 100% width as opposed to 150px
- adding code to position the div "manually" in the html (not CSS)
- I've discovered that float and text-align don't affect to fixed positioning
- width: 100% (with text-align: right) <--- 不太正确，我不喜欢 100% 宽度而不是 150px
- 添加代码以在 html（不是 CSS）中“手动”定位 div
- 我发现 float 和 text-align 不会影响固定定位
Help is greatly appreciated! Thank you.
非常感谢帮助！谢谢你。
回答by Jayx
If I understand correctly, this is what you're after.
如果我理解正确，这就是你所追求的。
You need to add a container with an absolute position to get the content over to the right and then use a fixed position container to keep it top right where you need it.
您需要添加一个具有绝对位置的容器以将内容移到右侧，然后使用固定位置的容器将其保持在您需要的位置的右上角。
回答by Fatma Nabilla
Alternative if you don't want to add additional absolute container
如果您不想添加额外的绝对容器，则可选择
#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;
}
回答by AlexM
I got it working with no problem in a jsfiddle. You may want to look around at the CSS that is affecting the area. You may have an issue if #content is not a block level element (no width will be applied and such. More code from you would be greatly helpful so we know exactly what is going on and can help you out more.
我让它在jsfiddle 中没有问题地工作。您可能需要查看影响该区域的 CSS。如果#content 不是块级元素，您可能会遇到问题（不会应用宽度等。来自您的更多代码将非常有帮助，因此我们确切地知道发生了什么并且可以为您提供更多帮助。
回答by RAN
I think you need this one:
我想你需要这个：
#content {
margin: 0 auto;
max-width: 1000px;
height:20px;
background:yellow;
position: relative;
}
#div {
width: 150px;
position: absolute;
right: 0px;
}
回答by AdityaSaxena
position:fixed is not relative to any container. It is relative to the html element of the DOM. That is the reason you're seeing it at extreme right whatever you do to the #content.
position:fixed 与任何容器无关。它相对于 DOM 的 html 元素。这就是无论你对#content 做什么，你都会看到它的原因。
