css - 图片不适用于相对位置

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

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

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

最佳答案

您需要将元素内联显示。为此，将两个图像的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将使元素偏离原始位置（即第一个图像的边缘），而不是容器的边缘。

关于css - 图片不适用于相对位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29654255/