Question

Quite simple, but it’s driving-me crazy

I have a div inside a div that has an image inside and I need to align that child div on the right bottom corner ( later I will reproduce the same but to align the div in any of the four corners of the div).

<div class="parent">
    <img src="someimage.jpg" />
    <div class="child">
        <b>Hi there !</b>
    </div>
</div>

The parent div and the image have the same dimensions (900w x 300h) and the child div is 100w x 50h.

Answer 1

You want to absolutely position the div to the bottom right of the parent div.

.parent {
    height: 200px;
    border: 1px solid;
    position: relative;
}

.child {
    position: absolute;
    right: 0;
    bottom: 0;
}
​

DEMO

For the other corners, you can set left and top positions as well.