在我的浏览器(chrome)上，最大化后，它看起来就像我想要的一样。只要我重新调整浏览器的大小(哪怕只是一点点)，导航和徽标就会移动到不同的位置，重叠/堆叠在一起。。。我已经研究了几天，尝试了很多不同的方法，包括用%定位所有元素，并为容器div分配一个最小宽度，没有任何东西有帮助。我显然错过了什么。请帮帮我，我快疯了！p.s.标志被定位成位于左&右侧导航。
<body>
<div id="index_container">
<a href="#"><img id="logo" alt="Logo" title="Home" src="#"/></a>
<div id="top_wrap">
<nav class="left">
<a href="#" title="About" alt="About Us">about Us</a>
<a href="#" title="Menu" alt="Menu">menu</a>
</nav>
<nav class="right">
<a href="#" title="Catering" alt="Catering">catering</a>
<a href="#" title="Find Us" alt="Find Us">find us</a>
</nav>
</div>
</body>
还有我的CSS，就目前而言：
#index_container{
min-width:980px; /* !?!?!??!?!?!?!?!??!?!?!??!?!*/
}
#top_wrap{
position: absolute;
top: 0;
left: 0;
height: 20%;
width: 100%;
background: #333;
opacity: 0.8;
}
.left{
position: absolute;
left: 18%;
top: 50%;
}
.left a{
color:white;
font-size: 28px;
text-decoration: none;
font-family: 'Gafata', sans-serif;
padding: 36px;
}
.right{
position: absolute;
left: 56%;
top:50%;
}
.right a{
color:white;
font-size: 30px;
text-decoration: none;
font-family: Gafata, sans-serif;
padding: 36px;
font-weight: 400;
}
.right a:hover{
color: #333;
background-color: white;
}
.left a:hover{
color: #333;
background-color: white;
}
#logo{
position: absolute;
left:37%;
top:-9%;
height: 310px;
width: 320px;
z-index: 1;
}
JSFIDDLE：http://jsfiddle.net/ZaEG2/
如果你对所有东西都使用Positon:Absolute，当你调整浏览器大小时，你会发现它开始在页面上跳舞，只需使用100%的简单高度和宽度元素，使其更灵活。