15

我有以下代码：

<!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 { position:absolute; 右：50px；} 然后 h1 和 img 都重叠。

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

提前感谢您的帮助。

4

4 回答 4

11

这是因为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/

于 2013-03-14T18:27:50.783 回答
6

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

 img
 {
     position:absolute;
     right:50px;
     top:100px;
 }
 h1
 {
     position:absolute;
     right:50px;
     top:75px;
 }
于 2015-09-11T15:05:03.270 回答
1

img占据该top: 0位置的原因是，通过指定h1as position: absolute，您将其从页面流中取出。img试图计算它的位置并且看不到h1那里。position: absolute尽管此 JSFiddle 可能对您有用，但仅使用此方法并没有很好的解决方法。

于 2013-03-14T18:30:16.357 回答
0

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

当使用绝对定位时，你应用它的元素，用 lamens 术语来说，会与页面和其他元素断开连接。它本质上是使该元素自行运行，而其他元素的影响为 0。从我读过的内容来看，您想要 position:absolute img 来检测 h1 的位置并避免它。使用 position:absolute 根本不可能做到这一点，它本身就是为了不这样做而设计的。

您如何希望这些实际出现，以便我可以在不使用 position: absolute 的情况下协助实现这一目标？

于 2013-03-14T18:27:56.637 回答