css绝对定位与右对齐_Css - Fatal编程技术网

css绝对定位与右对齐

css

css绝对定位与右对齐,css,Css,我有以下代码： <!DOCTYPE html> <html> <head> <style> img { position:absolute; right:50px; } </style> </head> <body> <h1>This is a heading</h1> <img src=

我有以下代码：

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


img
{
位置：绝对位置；
右：50px；
}
这是一个标题

从

如果我将h1的样式更改为： h1 { 位置：绝对位置；右：50px； } 然后h1和img都重叠

现在我没有提到img或h1的最高职位。因此，在第一种情况下，当h1没有任何样式时，img将h1单独留下，占据h1之后的下一个可用空间，并与右侧对齐（相隔50像素）。但当我提到h1相距50px（绝对定位）时，img和h1都重叠了。既然我没有提到排名靠前的位置，为什么img不让h1独自一人，并遵循它（而不是重叠它）？据我所知，我们使用的是绝对定位，其顶部位置未明确指定，因此，为什么会自动假设img必须占据顶部：0位置？如果h1占据top:0位置，则可以，因为它是第一个元素。但是img应该尊重h1的空间

提前感谢您的帮助。

这是因为

position:absolute

将元素从文档流中删除-它们不再堆叠，因为它们是绝对位置

我认为更好的方法是：

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

jsfiddle：

更适合您的方式：

只需将h1

文本对齐：右
jsIDLE:
请阅读此处的绝对定位：
使用绝对定位时，应用它的元素（用lamens的话）与页面和其他元素断开连接。它本质上是使该元素在不受其他元素影响的情况下独立运行。从我所读到的你想要的位置：绝对img来检测h1的位置并避免它。使用position:absolute根本不可能做到这一点，它本身就是为了不这样做而设计的
您希望它们实际如何显示，以便我可以在不使用position:absolute的情况下帮助实现这一点？
img
占据top:0
位置的原因是，通过将h1
指定为position:absolute
，您将其从页面流中删除img
试图计算它的位置，但在那里看不到h1
。仅使用position:absolute
并不是解决这个问题的好方法。
是的，您也可以在css中更改top
标记，如下所示：
 img
 {
     position:absolute;
     right:50px;
     top:100px;
 }
 h1
 {
     position:absolute;
     right:50px;
     top:75px;
 }

所以你想让h1和图像垂直堆叠？我只是想了解它的行为而已。谢谢你的回答。你有这方面的文件吗？这篇文章（）很好地解释了position:absolute工作。