圖像和頁面上的元素在縮放時未正確調整

Question

我構建了2個圖來解釋我的問題; http://i.imgur.com/ocu3uyU.jpg
http://i.imgur.com/W734ij4.jpg
我是新來的CSS。我基本上只是試圖讓我的頁面上的所有內容在縮放時保持「靜止不動」。然而，我遇到了這個問題，我的網頁上的元素在縮放時調整/移動真的很奇怪。以下是我的代碼片段：

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; } 

我該如何定位讓它們保持不動！

Answer 1

感謝您發佈的圖像更好地瞭解...

相反的左，作出正確的

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

這會做:)

編輯：搗鼓連擊理解

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