css - Images and elements on page not adjusting correctly when zooming

Question

I have constructed 2 diagrams explaining my issue; http://i.imgur.com/ocu3uyU.jpg
http://i.imgur.com/W734ij4.jpg
I am new to css. I'm basically just trying to get everything on my page to 'stay still' when zooming. However I am having problems with this, elements on my page are adjusting/moving really wierd while zooming. Here is a snippet of my code:

table{width:100px;
height:60px;
margin-left:auto;
margin-right:auto;
background-color:white;
color:white;
}

body{
background: url(background.png), black;
background-position:center; 
background-repeat:repeat-y;

color:white;
}

#bannerImage{
text-align:center;
position:relative;
top:-68px;
margin-left:0px;
padding:0px
p

}

#letters{
text-align:center;
position:relative;
top:-178px;

}

audio{                        //example of element moving wierdly
position:absolute;
left:1500px;


}
div { overflow-x: hidden; }

How do I postion things so that they stay still!

Answer 1

感谢您发布图片以便更好地理解...

与其向左，不如向右

audio{
position:absolute;
right:50px;
} 

这会做:)

编辑：小提琴理解击球手

http://jsfiddle.net/MarmeeK/tsaB8/