Question

我有以下代码：

<!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>

来自http://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_right

如果我将h1的样式更改为： H1 { 位置：绝对的; 右：50像素; } 那么h1和img都重叠了。

现在我没有提到img或h1的最高位置。所以在第一种情况下，当h1没有任何风格时，img单独留下h1并占据h1之后的下一个可用空间并且与右侧对齐（相隔50 px）。但是当我提到h1相距50px（绝对定位）时，img和h1都重叠了。现在因为我没有提到最高位置那么为什么不是img单独留下h1并跟随它（而不是重叠它）？我知道我们正在使用绝对定位，这会使模糊地指定顶部位置，为什么它会自动假设img必须占据顶部：0位置？如果h1占据顶部：0位置那么它很好，因为它是第一个元素。但是img应该尊重h1的空间。

提前感谢您的帮助。

Answer 1

这是因为position:absolute从文档流中删除了元素 - 它们不再堆叠，因为它们绝对是位置。

我认为更好的方法是：

h1, img{
    float:right;
    margin-right:50px;
    clear:both;
}

jsfiddle：http://jsfiddle.net/R7bXZ/

更好的方式：

只需提供h1 text-align:right;。

jsfiddle：http://jsfiddle.net/KvMLb/2/

Answer 2

是的，您也可以像这样更改css中的top标记：

 img
 {
     position:absolute;
     right:50px;
     top:100px;
 }
 h1
 {
     position:absolute;
     right:50px;
     top:75px;
 }

Answer 3

img占据top: 0位置的原因是，通过将h1指定为position: absolute，您将其从页面流中取出。 img尝试计算它的位置，但没有看到h1。虽然只有position: absolute {。}}，但使用{{1}}并没有很好的解决方法。

Answer 4

请阅读绝对定位：http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning

使用绝对定位时，以lamen方式应用它的元素将与页面和其余元素断开连接。它本质上使得该元素本身表现出来，而其他因素的影响是0。从我所读到的你想要的位置：绝对img来检测h1的位置并避免它。使用position：absolute是不可能的，它本身就是为了不这样做而设计的。

你希望这些实际出现如何，所以我可以在不使用position：absolute？

的情况下帮助实现这些目标

css绝对定位，右对齐

4 个答案: