CSS div放置图像而不干扰其他div

Question

我正在为我的教会创建一个网站.因为他们不知道没有网络程序员,所以我用微薄的技能来处理它.我的问题只是安置问题.我试图在页面的左上角放置一个图像,但是,无论我做什么,它都会干扰页面上的其他div元素.这是我目前的CSS:

body {
background-color: #FFFFFF;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#wrapper {
width: 90%;
background-color:#ffffff;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid blue;
}
div#image {
padding: 15px;
margin: 0px;
float: left;
}
div#header {
padding: 15px;
margin: 0px;
text-align: center;
}
div#nav {
width: 25%;
padding: 10px;
margin-top: 100px;
float: left;
}
div#main {
margin-left: 30%;
margin-top: 100px;
padding: 10px;
}
div#footer {
padding: 15px;
margin: 0px;
border-top: thin solid blue;
text-align: center;
}

无论我如何定义图像div,它总是推动主,导航和标题div不对齐.如果我只是将图像放在另一个div中,它仍会使事物移动.

有没有办法让页面以90%的宽度为中心,包装div中的所有其他内容,以及右上角的图像？如果它需要一种不同类型的东西,有人可以帮我搞清楚吗？仅在一个浏览器中起作用的东西无济于事,因为我希望它能够为大多数人尽可能无缝地工作.

Answer 1

您可能希望使用绝对定位,

#image { position:absolute; top:0; left:0; }

但是,这需要保持相对于您的包装器:

#wrapper { position:relative; }

虽然我正在严格猜测,提供更多信息,您将获得更明确的解决方案.