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中，并且将图像放在右上角？如果需要不同类型的东西，有人可以帮助我弄清楚吗？只在一个浏览器中运行的东西是没有用的，因为我希望它能够尽可能地无缝地为大多数人工作。

- Joshua Nurczyk

Answer 1

您可能想要使用绝对定位。

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

然而，这需要与您的包装器保持相对位置：

#wrapper { position:relative; }

虽然我只是猜测，但如果提供更多信息，您将得到更明确的解决方案。

- meder omuraliev

---

这几乎就是我要找的，只是有没有办法让图像不在0,0，而是在10,10？我尝试将其更改为top:10;left:10;但它根本没有移动。 - Joshua Nurczyk

Answer 2

使用 z-index 将图像放在更高的层级上。

http://www.w3schools.com/Css/pr_pos_z-index.asp

这样就不会移动其他任何东西。

- James Black

---

假设他在谈论 #image，为了使 z-index 的堆叠顺序效果生效，它首先需要一个非静态的位置。 - meder omuraliev

那是真的，我忘了提到那一部分。 - James Black

Answer 3

如果您不希望它影响页面上的其他内容，我可以确认一下它是否是背景图像吗？如果不是，那么您尝试过将其制作为背景图像吗？这样它就不会/不能影响文档流，并且不会因此移动任何内容。

但是，如果您已经有一个背景图像，这可能会使事情变得有些复杂。

- David Thomas