图像不应用相对定位答案

【问题标题】：Image doesn't apply relative positioning图像不应用相对定位
【发布时间】：2015-04-15 23:43:00
【问题描述】：

当我对图像应用相对定位时，它不会向右。但是当我使用绝对定位时，一切正常。我似乎无法弄清楚为什么相对定位不起作用。任何帮助表示赞赏。

img {
    display: block;
    position: relative;
    top: 0;
    right:0;
}

&lt;img src="http://img.jgi.doe.gov/images/img-user-forum.png"&gt;

【问题讨论】：

有什么问题？
正如我之前写的：“当我对图像应用相对定位时，它不起作用”
什么不起作用？往右边走？
是的，我编辑了我的问题

标签： css

【解决方案1】：

您需要内联显示元素。为此，将两个图像的display 属性设置为inline-block，并使用浮动来相对于另一个图像定位第二个图像。我建议阅读一些关于 CSS 定位和元素类型的好材料。

img {
    display: inline-block;
    position: relative;
    top: 0;
    right:0;
}
.one {
    display: inline-block;
    position:relative;
    float:right;
    clear:right;
}

<img src="http://img.jgi.doe.gov/images/img-user-forum.png">
    
<img class="one" src="http://img.jgi.doe.gov/images/img-user-forum.png">

相对定位不适用于bottom 或right，因为：

相对定位使用与绝对定位相同的四个定位属性。但不是根据浏览器视口确定元素的位置，而是从元素仍处于正常流程中的位置开始。

所以，right 会使元素偏离原始位置（即第一张图像的边缘），而不是容器的边缘。

【讨论】：

它没有帮助 - 使用 inline-block，我的图像仍然停留在左侧 jsfiddle.net/mindaugo/4uLvhxe8/1
@Mindaugo 你注意到花车了吗？
是的，我知道浮动的位置。但我的问题是我不知道为什么相对定位不起作用，而绝对定位一切正常
@Mindaugo 编辑了bottom 和right 上的澄清答案。

【解决方案2】：

在相对块元素中使用left，top，right，bottom不会根据父相对元素对齐元素，而是与正常元素位置相关 - TO ITSELF。所以 top: 0 表示它将从正常位置移动 0px。它会留在那里。相对于 left:0 意味着完全相同的东西 - 距正常元素位置的 0px 距离。另一方面，绝对元素与父相对元素相关，而不是与 img 的实际正常位置相关。这就是它的工作原理并保持在右上角。

【讨论】：