Question

This is my example of my website.

http://jsfiddle.net/noppanit/dh92t/

I have a problem like this, I make my website as responsive as possible, so I make the width and height of the image as percentage so when user resizes the image resizes as well. However, when I have a div to indicate that this person is myself, and I use absolute position. When I resize the image, the tag div also resizes but it moves out of the person I want to tag, in this case the most left person.

How can I make the tag div resizes and it sticks in the correct position and correct size regardless of the screen size. Thanks a lot.

Answer 1

You can use percentage for this. write like this:

.tag {
    position: absolute;
    width: 10%;
    height: 10%;
    border: 1px solid;
    top: 4%;
    left: 4%;
}

Check this http://jsfiddle.net/dh92t/2/