CSS absolute position error

CSS absolute position error

I'm having a problem with absolute positioning in my web page:
I want to position a button relative to its parent and this is what I did:
HTML
<div class="parent" align="middle">
<img src="background.png" width="1900px"/>
<div class="child">
<button class="button"></button>
</div>
</div>
CSS
.parent {
position: relative;
}
.child {
position: absolute;
top: 0px;
left:0px;
}
.button {
height: 55px;
width: 180px;
background-color: transparent;
border-color:transparent;
background: url(Button.png);
background-size: 100% auto;
background-repeat: no-repeat;
}
This code makes the button have its position relative to the window and
not to the image in which it is supposed to be, so when i zoom out or in
the button moves inside the image, instead of having the same relative
position.