Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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会使元素偏离原始位置（即第一个图像的边缘），而不是容器的边缘。

Answer 2

在相对块元素中使用left，top，right，bottom将不会根据父相对元素对齐元素，BUT与正常元素位置 - TO ITSELF相关。顶部：0表示它将从正常位置移动0px。它会留在那里。相对于左：0表示完全相同的东西 - 距正常元素位置0px距离。另一方面，绝对元素与父相对元素相关，而不是与img的实际正常位置相关。这就是它如何运作并保持在最右侧。

图像不适用相对定位

2 个答案: