Responsive 2 images over an other one image issues

Question

I have a problem with Responsive image... . see my code:

http://codepen.io/anon/pen/JozLmy

img, embed, object, video{ max-width: 100%; 
height: auto}


.wrap{
    margin: 0 auto;
    width: 1180px;
    max-width: 99%;
}


#anatomy{
    width: 100%;
    position: relative;
}


#anatomy div.mainbody{
    position: absolute;
    left: 0;
    top: 0
}

#anatomy div.brain{
    position: absolute;
    left: 200px;
    top: 43px
}
#anatomy div.heart{
    position: absolute;
    left: 725px;
    top: 320px;
}

when I resize the browser window, I want to all three images resize together without changed the first position.

I point the position that I want to Image No.2 and 3 stay on that position, with white line.

before changing browser size:

after changing:

with the code I write on CodePen, just the pink picture resize and the others didn't resize and reposition... . :(

How can I solve this problem?

please help me... .

Answer 1

My problem was solved by adding overflow:hidden and changing px unit to % and set each .brain and .heart DIVs with bottom: so,

#anatomy{
    width: 100%;
    position: relative;
    overflow: hidden;
}


#anatomy div.mainbody{
    position: absolute;
    left: 0;
    top: 0
}

#anatomy div.brain{
    position: absolute;
    width: 19.915254%;
    left: 25%; 
    bottom: 94%;
}
#anatomy div.heart{
    position: absolute;
    width: 12.288136%;
    left: 72.881356%; 
    bottom: 57%;
}

solved my problem.