CODEWITHSUNDEEP
css
Mindaugo
Mindaugo

Reputation: 87

Image doesn't apply relative positioning

When I apply relative positioning to image it doesn't going to the right. But when I use absolute positioning everything is OK. I can't seem to figure out why relative positioning doesn't work. Any help is appreciated.

img {
    display: block;
    position: relative;
    top: 0;
    right:0;
}
<img src="http://img.jgi.doe.gov/images/img-user-forum.png">

Upvotes: 0

Views: 1180

Answers (2)

bluefog
bluefog

Reputation: 1894

You need the elements to be displayed inline. For this set the display property to inline-block for both the images and use floats to position the second image relative to the other. I suggest reading up some good material on CSS positioning and element types.

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

Relative positioning does not work with bottom or right because :

Relative positioning uses the same four positioning properties as absolute positioning. But instead of basing the position of the element upon the browser view port, it starts from where the element would be if it were still in the normal flow.

So, right would make the element offset from the original position(ie. the edge of the first image), not the edge of the container.

Upvotes: 1

designarti
designarti

Reputation: 629

The use of left, top, right, bottom in relative block elements will not align the elements according to the parent relative element, BUT related to the normal element position - TO ITSELF. So top: 0 means it will move 0px from the normal position. It will stay there. Relative to left:0 means exactly the same thing - 0px distance from the normal element position. On the other side, absolute elements relate to the parent relative element, not to the actual normal position of your img. So that's how it works and stays top right.

Upvotes: 1

Related Questions