css - 缩放时页面上的图像和元素未正确调整

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

这样就可以了:)

编辑: fiddle 理解击球手

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