CSS css绝对定位，右对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15417215/
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 absolute positioning with right alignment
提问by Md. Reazul Karim
I have the following code:
我有以下代码：
<!DOCTYPE html>
<html>
<head>
<style>
img
{
position:absolute;
right:50px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="logocss.gif" width="95" height="84" />
</body>
</html>
from http://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_right
来自http://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_right
If I change the style of h1 to: h1 { position:absolute; right:50px; } then both the h1 and img overlaps.
如果我将 h1 的样式更改为： h1 { position:absolute; 右：50px；然后 h1 和 img 重叠。
Now I didn't mention the top position for img or h1. So in the first case when h1 didn't have any style, the img left h1 alone and occupy the next available space after the h1 and was aligned to the right side (50 px apart). But when I mentioned h1 to be 50px apart (with absolute positioning), both the img and h1 overlapped. Now as I didn't mention the top position then why is not img leaving h1 alone and follow it (instead of overlapping it)? I understand that we are using absolute positioning which leaves top position ambiguously specified so why is it automatically assuming that the img has to occupy the top:0 position? If h1 occupies top:0 position then it is fine because it is the first element. But img should respect the space of h1.
现在我没有提到 img 或 h1 的最高位置。因此，在第一种情况下，当 h1 没有任何样式时，img 将单独留下 h1 并占据 h1 之后的下一个可用空间并与右侧对齐（相距 50 像素）。但是当我提到 h1 相距 50px（绝对定位）时，img 和 h1 都重叠了。现在我没有提到顶部位置，那么为什么 img 不单独留下 h1 并跟随它（而不是重叠它）？我知道我们正在使用绝对定位，这会导致顶部位置模糊地指定，那么为什么它会自动假设 img 必须占据 top:0 位置？如果 h1 占据 top:0 位置，那很好，因为它是第一个元素。但是 img 应该尊重 h1 的空间。
Thanks in advance for help.
预先感谢您的帮助。
采纳答案by Bill
This is because position:absoluteremoves the element from the flow of the document - they don't stack anymore because they are position absolutely.
这是因为position:absolute从文档流中删除元素 - 它们不再堆叠，因为它们是绝对位置。
I think a better way to do this would be:
我认为更好的方法是：
h1, img{
float:right;
margin-right:50px;
clear:both;
}
jsfiddle: http://jsfiddle.net/R7bXZ/
jsfiddle：http: //jsfiddle.net/R7bXZ/
Even better way for you:
对你来说更好的方法：
Just give the h1 text-align:right;.
只需给出 h1 text-align:right;。
jsfiddle: http://jsfiddle.net/KvMLb/2/
jsfiddle：http: //jsfiddle.net/KvMLb/2/
回答by Mike
yeah, you could also just change the toptag in the css like so:
是的，您也可以top像这样更改css 中的标签：
img
{
position:absolute;
right:50px;
top:100px;
}
h1
{
position:absolute;
right:50px;
top:75px;
}
回答by kpeatt
The reason that imgis occupying the top: 0position is because, by specifying h1as position: absolute, you're taking it out of the page flow. imgattempts to calculate it's position and doesn't see the h1there. There's not a great way around this using only position: absolutealthough this JSFiddle might work for you.
img占据top: 0位置的原因是，通过指定h1as position: absolute，您将其从页面流中取出。img试图计算它的位置，但没有看到h1那里。position: absolute尽管此 JSFiddle 可能对您有用，但仅使用此方法并没有什么好方法。
回答by Michael
Read here on absolute positioning: http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning
在此处阅读绝对定位：http: //www.w3.org/wiki/CSS_absolute_and_fixed_positioning
When using absolute positioning, the element you apply it to, in lamens terms, becomes disconnected from the page and teh rest of the elements. It is essentially making that element behave on its own with 0 influence from other. From what I have read you want position:absolute img to detect where the h1 is and avoid it. This is simply not possible using position:absolute, it is in itself designed to NOT do that.
使用绝对定位时，应用它的元素（用 lamens 术语）与页面和其余元素断开连接。它本质上是使该元素独立运行，而不受其他元素的影响为 0。从我读过的内容来看，您想要 position:absolute img 来检测 h1 的位置并避免它。使用 position:absolute 根本不可能做到这一点，它本身就是为了不这样做而设计的。
How do you want these to actually appear so I can assist in achieving that without using position: absolute?
您希望这些如何实际出现，以便我可以在不使用 position: absolute 的情况下帮助实现这一目标？
